-
CSS3背景 background-size 设置背景图片的大小，以长度值或百分比显示，还可以通过cover和contain来对图片进行伸缩。 语法： background-size: auto | <长度值> | <百分比> | cover | contain 取值说明： 1、auto：默认值，不改变背景图片的原始高度和宽度； 2、<长度值>：成对出现如200px 50px，将背景图片宽高依次设置为前面两个值，当设置一个值时，将其作为图片宽度值来等比缩放； 3、<百分比>：0％~100％之间的任何值，将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值，当设置一个值时同上； 4、cover：顾名思义为覆盖，即将背景图片等比缩放以填满整个容器； 5、contain：容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。查看全部
-
CSS3背景 background-clip 用来将背景图片做适当的裁剪以适应实际需要。 语法： background-clip ： border-box | padding-box | content-box | no-clip 参数分别表示从边框、或内填充，或者内容区域向外裁剪背景。no-clip表示不裁切，和参数border-box显示同样的效果。backgroud-clip默认值为border-box。查看全部
-
1、label标签的for属性与radio的id一致那么能实现点击标签就能选中的效果。 2、熟记以下结构 <div class="wrapper"> <div class="box"> <input type="radio" checked="checked" id="boy" name="1" /><span></span> </div> <label for="boy">男</label> </div> 3、设置最外层wrapper的高度，设置一个圆形背景，position为relative，vertical-align为center;利用opacity将radio控件透明化大小为百分百覆盖优先级z-index为100权值（默认权值为0），注意设置margin0，控件默认有margin。span设置成白色圆形，利用left top使其能在背景中间显示。 4、+为相邻选择符，即紧跟其后的一个元素。input[type="radio"] + span即为紧跟input其后的span设置属性，这样可以让span和input关联起来。 input[type="radio"] + span { opacity: 0; } input[type="radio"]:checked + span { opacity: 1; } 这样span就能根据radio是否选中而是否显示出来达到模拟单选控件的效果查看全部
-
CSS3背景 background-origin 设置元素背景图片的原始起始位置。 语法： background-origin ： border-box（含有border、padding、content） | padding-box（padding、content） | content-box（content）; 参数分别表示背景图片是从边框，还是内边距（默认值），或者是内容区域开始显示。 如果背景不是no-repeat,这个属性无效，它会从边框开始显示。查看全部
-
@font-face { font-family : 字体名称; src : 字体文件在服务器上的相对或绝对路径; } 代码复制到本地无效的原因： 已拦截跨源请求：同源策略禁止读取位于 http://www.imooc.com/Amaranth-BoldItalic.otf 的远程资源。（原因：CORS 头缺少 'Access-Control-Allow-Origin'）。查看全部
-
溢出文本显示省略号 text-overflow:ellipsis; overflow:hidden; white-space:nowrap;查看全部
-
线性渐变(linear)和径向渐变(radial) 语法 linear-gradient:gradient([方向],[颜色起点],[颜色终点]) 角度 英文 作用 0deg to top 从下到上 90deg to right 从左到右 180deg to buttom 从上到下 270deg to left 从右到左 to top right 从左下到右上 to top left 从右下到左上 第二个和第三个参数，表示颜色的起始点和结束点，可以有多个颜色值。 background-image:linear-gradient(to left, red, orange,yellow,green,blue,indigo,violet);查看全部
-
为边框应用图片： border-image : url网址（超链接） 切割图片的宽度 图片延伸方式 border-image : url(borderimg.png) 70 round\repeat\stretch; repeat：重复 round：拉伸，压缩 stretch：拉伸，有多长拉多长查看全部
-
阴影模糊半径与阴影扩展半径的区别 阴影模糊半径：此参数可选，其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊； 阴影扩展半径：此参数可选，其值可以是正负值，如果值为正，则整个阴影都延展扩大，反之值为负值时，则缩小；查看全部
-
当父元素中只有一个子元素，而且只有唯一的一个子元素才会生效如 <ul> <li>Item1</li> <li>Item2</li> <li>Item3</li> </ul> <ul> <li>Itemxxx</li> </ul> Itemxxx只有自己一个子元素 所以能生效查看全部
-
<a href="#brand">Brand</a>可以通过元素的id“#brand”，利用a标签的超链接点击立即能跳转到该元素如本题的 <div class="menuSection" id="brand"> <p>content for Brand</p> </div> 其中可以和target配合使用标记出所需要的标签 #brand:target p { background: orange; color: #fff; } 只有在点击了a标签的连接target里的样式才会生效。查看全部
-
div[att^/$/*="val"] div元素有att属性 且该属性以val开头/以val结尾/包含val :root 指html标签 div:not([id="footer"]) 除了id为footer的都走这个样式查看全部
-
box-shadow是向盒子添加阴影。支持添加一个或者多个。 语法：box-shadow：X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]； 参数介绍： X轴偏移量： 必须，水平阴影的位置，允许负值。 Y轴偏移量： 必须，垂直阴影的位置，允许负值。 阴影模糊半径：可选，模糊距离。 阴影扩展半径：可选，阴影的尺寸。 阴影颜色： 可选，阴影的颜色，省略默认为黑色。 投影方式： 可选，（设置）inset时为内部阴影方式，如果省略为外阴影方式 注意：inset可以写在参数的第一个或最后一个，其他位置是无效的。 width:100px; height:100px; box-shadow:4px 4px 6px #666, /*外阴影右下角*/ -10px -6px 6px green, /*外阴影左上角*/ 4px 4px 4px blue inset, /*内阴影左上角*/ -5px -5px 6px red inset, /*内阴影右下角*/ -8px 10px 4px #4c221b inset, /*内阴影右上角*/ 10px -8px 4px #ff7500 inset; /*内阴影左下角*/查看全部
-
前缀 浏览器 -webkit chrome和safari -moz firefox -ms IE -o opera查看全部
-
width:100px; height:100px; box-shadow:4px 4px 6px #666, /*外阴影右下角*/ -10px -6px 6px green, /*外阴影左上角*/ 4px 4px 4px blue inset, /*内阴影左上角*/ -5px -5px 6px red inset, /*内阴影右下角*/ -8px 10px 4px #4c221b inset, /*内阴影右上角*/ 10px -8px 4px #ff7500 inset; /*内阴影左下角*/查看全部
举报
0/150
提交
取消