-
box-shadow是向盒子添加阴影。支持添加一个或者多个。 box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 参数介绍: X轴偏移量 必需。水平阴影的位置。允许负值。 Y轴偏移量 必需。垂直阴影的位置。允许负值。 阴影模糊半径 可选。模糊距离。 阴影扩展半径 可选。阴影的尺寸。 阴影颜色 可选。阴影的颜色。省略默认为黑色。 投影方式 可选。外部阴影 (outset)内部阴影(inset),默认值为outset(outset是默认的,不需要添加)。 注意:inset 可以写在参数的第一个或最后一个,其它位置是无效的。 如果添加多个阴影,只需用逗号隔开即可。如: .box_shadow{ box-shadow:4px 2px 6px #f00, -4px -2px 6px #000, 0px 0px 12px 5px #33CC00 inset; }查看全部
-
border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */查看全部
-
注意: 用逗号隔开每组background的缩写值; 如果有size值,需要紧跟position并且用"/"隔开; 分解写法时,background-color只能设置一个查看全部
-
background-size 设置背景图片的大小,以长度值或百分比显示,还可以通过cover和contain来对图片进行伸缩。 语法: background-size: auto | <长度值> | <百分比> | cover | contain cover:将背景图片等比缩放以填满整个容器(100%) contain:将背景图片等比缩放至某一边紧贴容器边缘为止查看全部
-
3个参数和background-origin一样 默认是border-box no-clip等同于border-box查看全部
-
background:url(http://static.mukewang.com/static/img/logo_index.png)left top / 75% 55% no-repeat, url(http://static.mukewang.com/static/img/logo_index.png) right bottom / 50% 40% no-repeat;查看全部
-
background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...查看全部
-
background-origin 设置元素背景图片的原始起始位置。 语法: background-origin : border-box | padding-box | content-box; 参数分别表示背景图片是从边框,还是内边距(默认值),或者是内容区域开始显示。 注意:如果背景不是no-repeat,这个属性无效,它会从边框开始显示。查看全部
-
1.@font-face xxx 2.font-family xxx查看全部
-
text-overflow:ellipsis; overflow:hidden; white-space:nowrap;查看全部
-
圆角效果 border-radius: 1.border-radius是向元素添加圆角边框。 2.border-radius:10px; /* 所有角都使用半径为10px的圆角 */ 上面的全写方法: border-top-left-radius:10px; border-bottom-left-radius:10px; border-top-right-radius:10px; border-bottom-right-radius:10px; border-radius: 5px 4px 3px 2px; /* 四个半径值分别是左上角、右上角、右下角和左下角,顺时针 */ 注:不要以为border-radius的值只能用px单位,你还可以用百分比或者em,但兼容性目前还不太好。 3.实心上半圆: 方法:把宽度(width)设为高度(height)的一半,并且只设置左上角和右上角的半径与元素的高度一致(大于也是可以的)。 div{ height:50px;/*是width的一半*/ width:100px; background:#9da; border-radius:50px 50px 0 0;/*半径至少设置为height的值*/ } 实心圆: 方法:把宽度(width)与高度(height)值设置为一致(也就是正方形),并且四个圆角值都设置为它们值的一半。如下代码: div{ height:100px;/*与width设置一致*/ width:100px; background:#9da; border-radius:50px;/*四个圆角值都设置为宽度或高度值的一半*/ } 4.实例;见代码快照查看全部
-
:root选择器和<html>元素的效果相同 eg: :root{background:orange} html {background:orange;}查看全部
-
http://img1.sycdn.imooc.com//5438cff800012a4d09080383.jpg查看全部
-
box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; e.g. .box_shadow{ box-shadow:4px 2px 6px #333333; }查看全部
-
transition:property duration timing-function delay; eg: -webkit-transition: all .5s ease-in .2s; transition: all .5s ease-in .2s;查看全部
举报
0/150
提交
取消