-
分别设置多个背景图的位置。left top将第一个背景图设置为左上角，100px 0将第二个背景图设置为距离所在元素的左100px下0px处，200px 0将第三个背景图设置为距离所在元素的左200px下0px处。查看全部
-
transition：后面的四个值分别代表 变换的属性、变换的持续时间、变换的速率和变换的延迟时间。查看全部
-
文本超出省略号： overflow:hidden; white-space:nowrap; text-oveflow:ellipsis;查看全部
-
color：rgba(R,G,B,A) 以上R、G、B三个参数，正整数值的取值范围为：0 - 255。百分数值的取值范围为：0.0% - 100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。A为透明度参数，取值在0~1之间，不可为负值。查看全部
-
:root选择器，从字面上我们就可以很清楚的理解是根选择器，他的意思就是匹配元素E所在文档的根元素。在HTML文档中，根元素始终是<html>。 “:root”选择器等同于<html>元素，简单点说： :root{background:orange}==html {background:orange;} 另外在IE９以下还可以借助“:root”实现hack功能查看全部
-
a[class^="column"]{background:red;} a[href$="doc"]{background:green;} a[title*="box"]{background:blue;}查看全部
-
border-image查看全部
-
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; [阴影扩展半径] 向外扩散查看全部
-
box-shadow inset 可以写在前面或者后面，内部阴影方式，如果省略为外阴影方式；查看全部
-
text-shadow:x-offset y-offset blur color x:正右负左 y：正下负上 blur:模糊度 必为正 color：你懂得查看全部
-
表单元素在使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，而readonly会将该值传递出去查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>::selection选择器</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <p>“::selection”伪元素是用来匹配突出显示的文本。浏览器默认情况下，选择网站文本是深蓝的背景，白色的字体， 有的设计要求不使用上图那种浏览器默认的突出文本效果，需要一个与众不同的效果，此时“::selection”伪元素就非常的实用。不过在Firefox浏览器还需要添加前缀。</p> </body> </html> ::selection{ background: orange; color: white; } ::-moz-selection{ background: orange; color: white; }查看全部
-
CSS3选择器 ::selection选择器 “::selection”伪元素是用来匹配突出显示的文本(用鼠标选择文本时的文本)。 注意： 1、IE9+、Opera、Google Chrome 以及 Safari 中支持 ::selection 选择器。 2、Firefox 支持替代的 ::-moz-selection。查看全部
-
form { border: 1px solid #ccc; padding: 20px; width: 300px; margin: 30px auto; } .wrapper { margin-bottom: 10px; } .box { display: inline-block; width: 30px; height: 30px; margin-right: 10px; position: relative; background: orange; vertical-align: middle; border-radius: 100%; } .box input { opacity: 0; position: absolute; top:0; left:0; width: 100%; height:100%; z-index:100;/*使input按钮在span的上一层，不加点击区域会出现不灵敏*/ } .box span { display: block; width: 10px; height: 10px; border-radius: 100%; position: absolute; background: #fff; top: 50%; left:50%; margin: -5px 0 0 -5px; z-index:1; } input[type="radio"] + span { opacity: 0; } input[type="radio"]:checked + span { opacity: 1; }查看全部
-
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>属性选择器</title> <link href="style.css" rel="stylesheet" type="text/css"> </head> <body> <form action="#"> <div class="wrapper"> <div class="box"> <input type="radio" checked="checked" id="boy" name="1" /><span></span> </div> <label for="boy">男</label> </div> <div class="wrapper"> <div class="box"> <input type="radio" id="girl" name="1" /><span></span> </div> <label for="girl">女</label> </div> </form> </body> </html>查看全部
举报
0/150
提交
取消