标签：opacity 女朋友 cti only 开头 :hover anim select 100%
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>属性选择器</title> 5 <style> 6 /*选中p标签里面有align属性的*/ 7 /*p[align]{color:red;}*/ 8 /*选中p标签里面有align属性并且值为center的*/ 9 /*p[align=center]{color:red;}*/ 10 11 /*以ce开头的*/ 12 /*p[align^=ce]{color:red;}*/ 13 /*包含e的*/ 14 p[align*="e"]{color:red;} 15 </style> 16 </head> 17 <body> 18 <p>我叫怒放，我现在很慌，有个叫汪峰想要我的命！</p> 19 <p align="right">我叫怒放，我现在很慌，有个叫汪峰想要我的命！</p> 20 <p align="center">我叫怒放，我现在很慌，有个叫汪峰想要我的命！</p> 21 <p align="cesuo">厕所</p> 22 23 24 <input type="radio" name="sex" value="1" />男 25 </body> 26 </html>
:link
:visited
:active
:hover
:focus 获取焦点的时候
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>伪类选择器</title> 5 <style> 6 /*当获取焦点的时候*/ 7 input:focus{border:1px solid blue;} 8 9 /* :not(选择器) */ 10 /*input:not(.one){width:400px;}*/ 11 12 /*符合大儿子身份的li*/ 13 li:first-child{color:red;} 14 /*符合小儿子身份的li*/ 15 li:last-child{color:blue;} 16 /*符合独生子身份的li*/ 17 li:only-child{font-size:30px;} 18 19 /*符合第n个儿子身份的li*/ 20 li:nth-child(2){font-size:50px;} 21 22 /*同级元素中的第1个li*/ 23 li:first-of-type{background:lime;} 24 25 /*绝后的标签*/ 26 p:empty{height:30px;background:pink;} 27 /*:checked：单选框或多选框*/ 28 /*:checked{width:100px;height:50px;}*/ 29 :checked+span{color:red;} 30 </style> 31 </head> 32 <body> 33 <!-- 将选中的姓名改为红色 --> 34 <!-- :checked --> 35 <input name="sex" type="radio"><span>男</span> 36 <input name="sex" type="radio"><span>女</span> 37 <!-- 选:empty --> 38 <p></p> 39 40 41 <!-- :focus --> 42 <input /> 43 <input class="one" /> 44 <input /> 45 46 <!-- 选儿子 --> 47 <ul> 48 <div>第1个儿子不是li</div> 49 <li>张根基第一次去女朋友家</li> 50 <li>老丈人热情的握住他的手说</li> 51 <li>你就是根基吧？</li> 52 </ul> 53 <hr> 54 <ol> 55 <div>第1个儿子不是li</div> 56 <li>知道上帝看片为什么不要钱吗？</li> 57 <li>人在做</li> 58 <li>天在看</li> 59 </ol> 60 <hr> 61 <ul> 62 <li>秦始皇的太子一般都不大行</li> 63 </ul> 64 </body> 65 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>伪对象</title> 5 <style> 6 /*选中第1个字*/ 7 p::first-letter{ 8 font-size:30px; 9 color:orange; 10 } 11 12 /*选中1行*/ 13 p::first-line{ 14 color:blue; 15 } 16 17 /*火狐需要加前缀*/ 18 p::-moz-selection{ 19 background:black; 20 color:red; 21 } 22 p::selection{ 23 background:black; 24 color:red; 25 } 26 27 /*在前面追加内容*/ 28 p::before{ 29 content:‘请问：‘; 30 } 31 /*在后面追加内容*/ 32 p::after{ 33 content:‘行黑红选择喝两杯水！‘; 34 } 35 </style> 36 </head> 37 <body> 38 <p>凝聚力发时间浪费了多少分了呢<br>接飞机撒漏发了</p> 39 </body> 40 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>opacity透明度和边框圆角</title> 5 <style> 6 .box{ 7 width:200px; 8 height:200px; 9 background:orange; 10 position:relative; 11 top:200px; 12 left:50px; 13 14 /*边框圆角*/ 15 border-radius:50%; 16 } 17 .box:hover{ 18 /*0~1之间：0全透明，1不透明*/ 19 opacity:0.5; 20 /*透明度兼容IE的写法*/ 21 filter:alpha(opacity=50); 22 } 23 24 .box1{ 25 width:300px; 26 height:300px; 27 background:green; 28 29 /*边框圆角*/ 30 border-bottom-left-radius:100%; 31 border-bottom-right-radius:50%; 32 } 33 </style> 34 </head> 35 <body> 36 <div class="box"></div> 37 <div class="box1"></div> 38 </body> 39 </html>
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>盒子阴影</title> 5 <style> 6 .box{ 7 width:200px; 8 height:400px; 9 background:green; 10 margin:50px auto; 11 12 /*盒子阴影:x轴 y轴 模糊度 外延值 颜色*/ 13 /*box-shadow:0px 0px 10px 10px red;*/ 14 /*小米官网的凸起阴影*/ 15 box-shadow:0 15px 30px rgba(0,0,0,0.5); 16 } 17 18 p{ 19 font-size:100px; 20 /*文字阴影*/ 21 text-shadow:5px 5px 3px #544; 22 /*文字描边*/ 23 -webkit-text-stroke:3px pink; 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box"></div> 29 30 <p>谁娶了多愁善感的你，谁特么倒霉到底！</p> 31 </body> 32 </html>
animation:名称 持续时间 过渡类型 延迟时间 循环次数 是否反向;
@keyframes 定义动画详情
1 <html lang="en"> 2 <head> 3 <meta charset="UTF-8"> 4 <title>CSS的动画</title> 5 <style> 6 @import ‘‘; 7 .box{ 8 width:100px; 9 height:100px; 10 background:pink; 11 12 /*动画*/ 13 animation:sb .5s linear infinite alternate; 14 } 15 16 @keyframes sb{ 17 50%{ 18 transform:translateY(400px); 19 } 20 100%{ 21 transform:translateX(800px); 22 background:blue; 23 } 24 } 25 </style> 26 </head> 27 <body> 28 <div class="box"></div> 29 </body> 30 </html>
标签：opacity 女朋友 cti only 开头 :hover anim select 100%
原文地址：https://www.cnblogs.com/zhony/p/10072520.html
