参考工具
css3 手册
CSS3 click chart
border-radius
用于添加圆角效果
语法:
border-radius:[ <length> | <percentage> ]{1,4} [ / [ <length> | <percentage> ]{1,4} ]?
<length>:
用长度值设置对象的圆角半径长度。不允许负值
<percentage>:
用百分比设置对象的圆角半径长度。不允许负值
实例:
border-radius:10px;
.radius{
border-top-left-radius:5px; /*左上角,注意顺序是先上下后左右*/
border-top-right-radius:10px; /*右上角*/
border-bottom-left-radius:15px; /*左下角*/
border-bottom-left-radius:20px; /*右下角*/
/*即使元素没有边框,圆角也可以用到 background 上面,
具体效果受 background-clip 影响。*/
background-color:red;
}
兼容性:
IE9+,Firefox4+,Chrome5+,Safari5+,Opera01.5+,iOS Safari4+,Android Browser2.2+ ,Android Chrome18+
兼容方法:
低版本的 chrome:-webkit-border-radius:10px;
低版本的 firefox:-moz-border-radius:10px;
IE6/7/8:
- 使用 DD_roudies.js(推荐),详情参考DD_roundies
<style type="text/css">
.radius {
width: 300px;
height: 300px;
border:1px solid red;
}
</style>
<div class="radius"></div>
<script src="http://dillerdesign.com/experiment/DD_roundies/DD_roundies_0.0.2a-min.js"></script>
<script type="text/javascript">
DD_roundies.addRule('.radius', '10px 15px 30px 0',false);
</script>
- 使用 jquery.corner.js,详情参考jquery.corner.js
<style type="text/css">
.render {
width: 300px;
height: 300px;
background: red;
}
</style>
<div class="render"></div>
<script src="http://apps.bdimg.com/libs/jquery/1.2.6/jquery.min.js"></script>
<script src="jquery.corner.js"></script>
<script type="text/javascript">
$('.render').corner("top 30px");
</script>
- 引入 ie-css3 兼容文件,详情参阅让 IE6/IE7/IE8 浏览器支持 CSS3 属性
.radius{
-moz-border-radius: 15px; /* Firefox */
-webkit-border-radius: 15px; /* Safari 和 Chrome */
border-radius: 15px; /* Opera 10.5+, 以及使用了IE-CSS3的IE浏览器 */
behavior: url(ie-css3.htc);
}
详情参阅border-radius
box-shadow
用于添加阴影效果
语法:
box-shadow:none|[inset? && [<offset-x><offset-y><blur-radius>?<spread-radius>?<color>?]]#
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
<offset-x>
: 这是第一个 length 值设置水平偏移量,如果是负值则阴影位于元素左边。
<offset-y>
: 这是第二个 length 值设置垂直偏移量,如果是负值则阴影位于元素上面。
<blur-radius>
:这是第三个 length 值。值越大,糊糊面积越大,阴影就越大越淡。不能为负值。默认为 0,此时阴影边缘锐利。
<color>
:设置对象的阴影的颜色。
实例:
box-shadow: 10px 10px 5px gray;
兼容性:
IE9.0+,Firefox4.0+,Chrome10.0+,Safari5.1+,Opera10.5+,Safari5.0+,Android Browser4.0+,Android Chrome18.0+
兼容方法:
低版本的 chrome:-webkit-box-shadow:10px 10px 5px #888;
低版本的 firefox:-moz-box-shadow:10px 10px 5px #888;
IE6/7/8:
- 引入 ie-css3 兼容文件(推荐),缺点:不支持除了黑色(#000)以外的其他颜色,详情参阅让 IE6/IE7/IE8 浏览器支持 CSS3 属性
.box{
width:100px;
height:100px;
background-color:red;
-webkit-box-shadow:10px 10px 5px gray;
-moz-box-shadow:10px 10px 5px gray;
box-shadow: 10px 10px 5px gray;
behavior:url(ie-css3.htc);
}
- 使用 DropShadow 滤镜,缺点:阴影不能边缘模糊
filter:progid:dXImageTransform.Microsoft.DropShadow(color=#888888,offX=10,offY=10,positives=true);
- 使用 Shadow 滤镜,类似于投影效果,缺点:阴影不能边缘模糊
filter:progid:DXImageTransform.Microsoft.Shadow(color='#0099ff', Direction='120', Strength='10');
详情参阅box-shadow
border-image
用来给元素边框添加背景图片
语法:
border-image:<' border-image-source '> || <' border-image-slice '> [ / <' border-image-width '> |
/ <' border-image-width '>? / <' border-image-outset '> ]? || <' border-image-repeat '>
<’ border-image-source ‘>:设置或检索对象的边框是否用图像定义样式或图像来源路径。
<’ border-image-slice ‘>: 设置或检索对象的边框背景图的分割方式,该属性指定从上,右,下,左方位来分隔图像,将图像分成 4 个角,4 条边和中间区域共 9 份,中间区域始终是透明的(即没图像填充),除非加上关键字 fill。
<’ border-image-width ‘>: 设置或检索对象的边框厚度。
<’ border-image-outset ‘>:设置或检索对象的边框图像可超出边框盒的大小。
<’ border-image-repeat '>:设置或检索对象的边框图像的平铺方式 repeat,round,stretch。
实例:
border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 round;
兼容性:
IE11+, Firefox15+, Chrome16+ , Safari6+,Opera15+,iOS Safari6+,Android Browser4.4+, Android Chrome18+
兼容方法:
低版本的 chrome:-webkit-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 stretch;
低版本的 firefox:-moz-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 stretch;
低版本的 Opera:-o-border-image:url("http://www.w3school.com.cn/i/border.png") 30 30 stretch;
IE 未解决
详情参阅border-image,border-image
background-size
设置背景图片大小。
语法:
background-size:<bg-size>#
<bg-size> = [ <length> | <percentage> | auto ]{1,2} | cover | contain
<length>:
用长度值指定背景图像大小。不允许负值。
<percentage>:
用百分比指定背景图像大小。不允许负值。
auto:背景图像的真实大小。
cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
实例:
background-size: cover;
兼容性:
IE9+,Firefox4+, Chrome15+,Safari7+, Opera15+, iOS Safari7+, Android Browser4.4+, Android Chrome18+
兼容方法:
低版本的 chrome:-webkit-background-size:10px 10px 5px #888; //不支持background简写
低版本的 firefox:-moz-background-size:10px 10px 5px #888;
IE8:
- 方法一(推荐)、引入 backgroundsize.min.htc 兼容文件
.size {
width: 400px;
height: 400px;
margin: 20px auto 0;
background: green url(img/1.jpg) no-repeat scroll center 0;
background-size: cover;
-ms-behavior: url(js/backgroundsize.min.htc);
}
- 方法二、针对 IE8 的 hack
<!--[if IE 8]>
<style type="text/css">
.size {
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/1.jpg', sizingMethod='scale')";
}
//该函数只能模仿cover值,IE8下效果与IE9/10稍有不同,图片占满背景大小且不超出,而且可能会带来其他影响
</style>
<![endif]-->
详情参阅background-size
background-origin
指定背景图片 background-image 属性的原点位置的背景相对区域,当使用 background-attachment 为 fixed 时,该属性将被忽略不起作用
语法:
background-origin:<box>#
<box> = border-box | padding-box | content-box
padding-box:从 padding 区域(含 padding)开始显示背景图像。
border-box: 从 border 区域(含 border)开始显示背景图像。
content-box:从 content 区域开始显示背景图像
实例:
background-origin:content-box;padding:10px;
兼容性:
IE9+,Firefox4.0+ Chrome4.0+ Safari6.0+, iOS Safari6.0+, Android Browser3.0+, Android Chrome18+
兼容方法:
firefox4.0 以下:-moz-background-origin:padding | border; //没有content
IE8 下 background-origin 默认为 padding-box
详情参阅background-origin
background-clip
设置元素的背景(背景图片或颜色)是否延伸到边框下面。
语法:
background-clip:<box>#
<box> = border-box | padding-box | content-box | inherit
border-box 背景延伸到边框外沿(但是在边框之下)。
padding-box 边框下面没有背景,即背景延伸到内边距外沿。
content-box 背景裁剪到内容区 (content-box) 外沿。
实例:
background-clip:border-box;
兼容性:
IE9+,Firefox4.0+, Chrome4.0+, Safari6.0+,iOS Safari6.0+, Android Browser3.0+, Android Chrome18.0+
兼容方法:
firefox4.0 以下:-moz-background-clip:padding | border; //没有content
IE8 下 background-clip 默认为 padding-box
multiple backgrounds
语法:
background:[<bg-layer>,]*<final-bg-layer><bg-layer>=<bg-image>||<position>[/<bg-size>]?
||<repeat-style>||<attachment>||<box>||<box><final-bg-layer>=<bg-image>
||<position>[/<bg-size>]?||<repeat-style>||<attachment>
||<box>||box>||<'background-color'>
实例:
background:
url(test1.jpg) no-repeat scroll 10px 20px/50px 60px padding-box,
url(test1.jpg) no-repeat scroll 10px 20px/70px 90px padding-box,
url(test1.jpg) no-repeat scroll 10px 20px/110px 130px padding-box #aaa;
兼容性:
IE9+,Firefox3.6+, Chrome4.0+, Safari3.1+
兼容方法:
未解决
text-shadow
为文字添加阴影
语法:
textshadow:none | [inset? && [ <offset-x> <offset-y> <blur-radius>?<color>? ] ]#
inset:设置对象的阴影类型为内阴影。该值为空时,则对象的阴影类型为外阴影
<offset-x>
: 这是第一个 length 值设置水平偏移量,如果是负值则阴影位于元素左边。
<offset-y>
: 这是第二个 length 值设置垂直偏移量,如果是负值则阴影位于元素上面。
<blur-radius>
:这是第三个 length 值。值越大,糊糊面积越大,阴影就越大越淡。 不能为负值。默认为 0,此时阴影边缘锐利。
<color>
:设置对象的阴影的颜色。
实例:
text-shadow:1px 1px 2px red;
兼容性:
IE10+, Firefox3.5+, Chrome4.0+, Safari6.0+
兼容方法:
低版本的 chrome:-webkit-text-shadow:1px 1px 1px #000;
低版本的 firefox:-moz-text-shadow:1px 1px 1px #000;
IE6/7/8:
- 方法一、引入 ie-css3 兼容文件
behavior:url(ie-css3.htc);
- 方法二、
filter:shadow(color=blue,direction=225)
,direction 表示投影角度
详情参阅让 IE6/IE7/IE8 浏览器支持 CSS3 属性
word-wrap
浏览器是否允许单词中断换行
word-wrap 属性原本属于微软的一个私有属性,在 CSS3 现在的文本规范草案中已经被重名为 overflow-wrap
当你使用 <’ overflow-wrap ‘> 时,最好同时使用 <’ word-wrap '> 作为备选,作向前兼容。
语法:
word-wrap:normal | break-word
实例:
word-wrap: break-word;
兼容性:
IE6+,Firefox3.5+, Chrome4+, Safari6+, iOS Safari6+, Android Browser2.1+, Android Chrome18+
兼容方法:
现代浏览器几乎都支持
@font-face
能够加载服务器端的字体文件,让客户端显示客户端所没有安装的字体。
语法:
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
实例:
@font-face {
font-family: "YourWebFontName";
src: url("YourWebFontName.eot"); /* IE9 Compat Modes */
src: url("YourWebFontName.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
url("YourWebFontName.woff") format("woff"),
/* Modern Browsers */ url("YourWebFontName.ttf") format("truetype"), /* Safari, Android, iOS */
url("YourWebFontName.svg#YourWebFontName") format("svg"); /* Legacy iOS */
font-weight: normal;
font-style: normal;
}
兼容性:
几乎所有浏览器支持网络字体@font-face 的用法
兼容方法:
详情参阅 @font-face
transform
元素可以按照设定的值变形、旋转、缩放、倾斜
语法:
transform : none | <transform-function> [ <transform-function> ]*
transform-function list:
matrix() = matrix(<number>[,<number>]{5,5})
matrix3d() = matrix3d(<number>[,<number>]{15,15})
translate() = translate(<translation-value>[,<translation-value>]?)
translate3d() = translate3d(<translation-value>,<translation-value>,<length>)
translatex() = translatex(<translation-value>)
translatey() = translatey(<translation-value>)
translatez() = translatez(<length>)
rotate() = rotate(<angle>)
rotate3d() = rotate3d(<number>,<number>,<number>,<angle>)
rotatex() = rotatex(<angle>)
rotatey() = rotatey(<angle>)
rotatez() = rotatez(<angle>)
scale() = scale(<number>[,<number>]?)
scale3d() = scale3d(<number>,<number>,<number>)
scalex() = scalex(<number>)
scaley() = scaley(<number>)
scalez() = scalez(<number>)
skew() = skew(<angle>[,<angle>]?)
skewx() = skewx(<angle>)
skewy() = skewy(<angle>)
perspective() = perspective(<length>)
<translation-value> = <length> | <percentage>
实例:
transform:none;
兼容性:
IE9+, Firefox3.5+, Chrome4.0+, Safari6.0+, iOS Safari8.4+, Android Browser4.4+, Android Chrome34+
兼容方法:
.transform {
-webkit-transform: x, y;
-moz-transform: x, y;
-ms-transform: x, y;
-o-transform: x, y;
transform: x, y;
}
IE8 及以下:用 IE 滤镜
{
filter: fliph; /*水平翻转相当于transform:rotateY(180deg)*/
filter: flipv; /*垂直翻转相当于transform:rotateX(180deg)*/
}
详情参阅transform
transition
css 的属性值在一定的时间区间内平滑地过渡
语法:
transition :[<'transition-property'> || <'transition-duration'> ||
<'transition-timing-function'> || <'transition-delay'> [, [<'transition-property'>
|| <'transition-duration'> || <'transition-timing-function'> || <'transition-delay'>]]*
transition-property : none | all | [ <ident> ] [, <ident> ]*
检索或设置对象中的参与过渡的属性
transition-duration : <time> [, <time>]*
检索或设置对象过渡的持续时间
transition-timing-function :ease | linear | ease-in | ease-out | ease-in-out | step-start
| step-end | steps(<integer>[, [ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)
[,ease | linear | ease-in | ease-out | ease-in-out | step-start | step-end | steps(<integer>[,
[ start | end ] ]?) | cubic-bezier(<number>, <number>, <number>, <number>)]*
检索或设置对象中过渡的动画类型
transition-delay : <time> [, <time>]*
检索或设置对象延迟过渡的时间
实例:
transition: all .5s ease-in-out 1s;
兼容性:
IE10+, Firefox16+, Chrome26+ ,Safari6.1+ , iOS Safari7+, Android Browser4.4+, Android Chrome25+
兼容方法:
p {
-webkit-transition: all 0.5s ease-in-out 1s;
-moz-transition: all 0.5s ease-in-out 1s;
-o-transition: all 0.5s ease-in-out 1s;
transition: all 0.5s ease-in-out 1s;
}
IE9 以及更早的版本,不支持 transition 属性。
详情参阅transition
animation
检索或设置对象所应用的动画特效。
语法:
animation:<single-animation>[,<single-animation>]*
<single-animation> = <single-animation-name> || <time> || <single-animation-timing-function>
|| <time> || <single-animation-iteration-count> || <single-animation-direction> ||
<single-animation-fill-mode> || <single-animation-play-state>
<’ animation-name ‘>:检索或设置对象所应用的动画名称
<’ animation-duration ‘>:检索或设置对象动画的持续时间
<’ animation-timing-function ‘>:检索或设置对象动画的过渡类型
<’ animation-delay ‘>:检索或设置对象动画延迟的时间
<’ animation-iteration-count ‘>:检索或设置对象动画的循环次数
<’ animation-direction ‘>:检索或设置对象动画在循环中是否反向运动
<’ animation-fill-mode ‘>:检索或设置对象动画时间之外的状态
<’ animation-play-state '>:检索或设置对象动画的状态。
实例:
兼容性:
IE10+,Firefox16+, Chrome43+, Safari9+
兼容方法:
低版本的 chrome:-webkit-
低版本的 firefox:-moz-
IE9 及以下不支持
详情参阅animation
@keyframes
用于创建动画
语法:
@keyframes IDENT {
0% {
properties: Properties value;
}
Percentage {
properties: Properties value;
}
100% {
properties: Properties value;
}
}
实例:
见上例
兼容性:
IE10+,Firefox16+, Chrome43+, Safari9+
兼容方法:
低版本的 chrome:-webkit-
低版本的 firefox:-moz-
IE9 及以下不支持
详情参阅animation
linear-gradient & radial-gradient
实现真实的渐变效果。
语法:
<linear-gradient> = linear-gradient([ [ <angle> | to <side-or-corner> ] ,]? <color-stop>[, <color-stop>]+)
<side-or-corner> = [left | right] || [top | bottom]
<color-stop> = <color> [ <length> | <percentage> ]?
<angle>:用角度值指定渐变的方向(或角度)。
<color-stop> 用于指定渐变的起止颜色:
实例:
background:linear-gradient(to bottom, #fff 0%, red 100%);
兼容性:
IE10+, Firefox16+, Chrome26+, Safari6.1+
兼容方法:
低版本的 chrome:-webkit-
低版本的 firefox:-moz-
IE9 及以下可使用 IE 滤镜处理:
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000',endColorstr='#ffffff');
详情参阅gradient
rgba(r,g,b,a)
设置颜色 red+green+blue+alpha
语法:
rgba(r,g,b,alpha)
实例:
rgba(255,0,0,.2)
兼容性:
IE9+, Firefox2+, Chrome4+, Safari3+, iOS Safari3.2+, Android Browser2.1+, Android Chrome18+
兼容方法:
IE6/7/8 不支持使用 rgba 模式实现透明度,可使用 IE 滤镜处理
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#7fff0000,endColorstr=#7fff0000);
flex
设置或检索弹性盒模型对象的子元素如何分配空间。用在子容器上
语法:
flex:none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默认值为 0 1 auto,建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
flex-grow:<number>设置或检索弹性盒的扩展比率。
默认为 0,如果所有子容器的 flex-grow 属性都为 1,则它们将等分剩余空间(如果有的话)。如果一个子容器的 flex-grow 属性为 2,其他都为 1,则前者占据的剩余空间将比其他项多一倍。
flex-shrink:<number>设置或检索弹性盒的收缩比率。
如果所有子容器的 flex-shrink 属性都为 1,当空间不足时,都将等比例缩小。如果一个子容器的 flex-shrink 属性为 0,其他子容器都为 1,则空间不足时,前者不缩小。
flex-basis:<length> | <percentage> | auto | content
定义了在分配多余空间之前,子容器占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为 auto,即子容器的本来大小。
实例:
兼容性:
IE11+,Firefox22+, Chrome21+, Safari6.1+
兼容方法:
低版本的 chrome:-webkit- 或者 -webkit-box-flex
低版本的 firefox:-moz-box-flex:1;
IE10:-ms-flex:1;
box-flex 效果类似于过渡版本和新版本的 flex 属性;
详情参阅flex
flex-flow
设置或检索弹性盒模型对象的子元素排列方式。用在父容器上
语法:
flex-flow:<' flex-direction '> || <' flex-wrap '>
<’ flex-direction '>:定义弹性盒子元素的排列方向。
flex-direction:row | row-reverse | column | column-reverse
- row:主轴与行内轴方向作为默认的书写模式。即横向从左到右排列(左对齐)。
- row-reverse:对齐方式与 row 相反。
- column:主轴与块轴方向作为默认的书写模式。即纵向从上往下排列(顶对齐)。
- column-reverse:对齐方式与 column 相反。
<’ flex-wrap '>控制 flex 容器是单行或者多行.flex-wrap:nowrap | wrap | wrap-reverse
- nowrap:flex 容器为单行。该情况下 flex 子项可能会溢出容器
- wrap:flex 容器为多行。该情况下 flex 子项溢出的部分会被放置到新行,子项内部会发生断行
- wrap-reverse:反转 wrap 排列。
实例:
兼容性:
IE11+, Firefox28+, Chrome29+, Safari9+
兼容方法:
可以通过 box-orient:horizontal + box-direction:normal 达到新版本 flex-direction:row 的效果;
可以通过 box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:row-reverse 的效果;
可以通过 box-orient:vertical + box-direction:normal 达到新版本 flex-direction:column 的效果;
可以通过 box-orient:horizontal + box-direction:reverse 达到新版本 flex-direction:column-reverse 的效果;
box-lines 效果类似于过渡版本和新版本的 flex-wrap 属性
justify-content
设置或检索弹性盒子元素在主轴(横轴)方向上的定位方式。
语法:
justify-content:flex-start | flex-end | center | space-between | space-around
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个子元素两侧的间隔相等。所以,子元素之间的间隔比子元素与边框的间隔大一倍
实例:
兼容性:
IE11+, Firefox22+, Chrome29+, Safari9+
兼容方法:
详情参阅justify-content
align-content
调整伸缩子元素在侧轴(纵轴)上的定位方式,如果子元素只有一根轴线,该属性不起作用
语法:
align-content:flex-start | flex-end | center | space-between | space-around | stretch
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
实例:
兼容性:
IE11+, Firefox22+, Chrome29+, Safari9+
兼容方法:
低版本的 chrome:-webkit-
box-pack 效果等同于过渡版本的 flex-pack 属性和新版本的 justify-content 属性;
详情参阅align-content
align-items
定义 flex 子项在 flex 容器的当前行的侧轴(纵轴)方向上的定位方式。
语法:
align-items:flex-start | flex-end | center | baseline | stretch
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为 auto,将占满整个容器的高度。
实例:
兼容性:
IE11+, Firefox22+, Chrome29+, Safari9+
兼容方法:
低版本的 chrome:-webkit-
box-align 效果等同于过渡版本的 flex-align 属性和新版本的 align-items 属性;
详情参阅align-items
align-self
定义 flex 子项单独在侧轴(纵轴)方向上的对齐方式。align-self 属性允许单个项目有与其他项目不一样的对齐方式,可覆盖 align-items 属性。默认值为 auto,表示继承父元素的 align-items 属性,如果没有父元素,则等同于 stretch。
语法:
align-self:auto | flex-start | flex-end | center | baseline | stretch
实例:
兼容性:
IE11+, Firefox22+, Chrome29+, Safari9+
兼容方法:
低版本的 chrome:-webkit-
详情参阅align-self
order
设置或检索弹性盒模型对象的子元素的排列顺序。数值越小,排列越靠前,默认为 0。
语法:
order:<integer>默认为0
实例:
兼容性:
IE11+, Firefox22+, Chrome29+, Safari9+
兼容方法:
低版本的 chrome:-webkit-
box-oridinal-group 效果等同于过渡版本的 flex-order 属性和新版本的 order 属性;
详情参阅order
box-sizing
用来改变默认的 CSS 盒模型 对元素宽高的计算方式
语法:
box-sizing:content-box | border-box
content-box:
padding 和 border 不被包含在定义的 width 和 height 之内。对象的实际宽度等于设置的 width 值和 border、padding 之和,即 ( Element width = width + border + padding )
border-box:
padding 和 border 被包含在定义的 width 和 height 之内。对象的实际宽度就等于设置的 width 值,即使定义有 border 和 padding 也不会改变对象的实际宽度,即 ( Element width = width )
实例:
box-sizing:content-box
兼容性:
IE8+, Firefox29+, Chrome10+, Safari6+ #####兼容方法:
详情参阅box-sizing
resize
设置或检索对象的区域是否允许用户缩放,调节元素尺寸大小。多用于 textarea 元素
语法:
resize:none | both | horizontal | vertical
实例:
resize:none
兼容性:
Firefox Chrome Safari 现代版都兼容
兼容方法:
IE 全不兼容
opacity
设置设置元素的不透明级别
语法:
opacity: value|inherit;
实例:
opacity:0.5;
filter:alpha(opacity=50);
对于行内元素需要先将其转化为块状元素才行
原文链接: https://jesse121.github.io/blog/articles/2016/04/28.html
版权声明: 转载请注明出处.