Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS3 border-radius 属性 菜鸟教程(runoob.com) #rcorners4 { border-radius: 15px 50px 30px 5px; padding: 20px; width: 200px; height: 150px; } #rcorners5 { border-radius: 15px 50px 30px; padding..
CSS3 border-top-left-radius 属性 实例 为div元素的左上角添加一个圆角边框： div { border:2px solid; border-top-left-radius:2em; } 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。..
CSS3 border-top-right-radius 属性 实例 为div元素的右上角添加一个圆角边框： div { border:2px solid; border-top-right-radius:2em; } 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号..
CSS3 box-align 属性 实例 对div中的子元素同时使用box-align和box-pack的居中属性： div { width:350px; height:100px; border:1px solid black; /* Internet Explorer 10 */ display:-ms-flexbox; -ms-flex-pack:center; -ms-flex-align:ce..
CSS3 box-direction 属性 实例 由右至左，显示一个div box的子元素： div{width:350px;height:100px;border:1px solid black; /* Internet Explorer 10 */display:-ms-flexbox; -ms-flex-direction:row-reverse;/* Firefox */display:-moz-box; ..
CSS3 box-flex-group 属性 浏览器支持 目前主流浏览器并不支持 box-flex-group 属性。 属性定义及使用说明 box-Flex-group属性是用来指定灵活的元素的Flex组。 提示： ：随着box收缩和增长，元素是灵活的收缩或增长。 语法 box-flex-group: integer; 值 描述 integer 一个整数（第一个Flex组1的值越高，后来的F..
CSS3 box-flex 属性 实例 定义两个灵活的 p 元素。如果父级 box 的总宽度为 300px，＃P1 将有一个 100px 的宽度，P2 将有一个 200px 的宽度： [mycode3 type='css'] #p1 { -moz-box-flex:1.0; /* Firefox */ -webkit-box-flex:1.0; /* Safari and Chrome */ -ms-f..
CSS3 box-lines 属性 实例 指定一个div box允许扩大到多行： div { display:box; box-orient:horizontal; box-lines:multiple; width:200px; } 尝试一下 » 浏览器支持 目前所有主流浏览器都不支持box-lines属性。 属性定义及使用说明 box-lines属性指定每当它运行在父级box的..
CSS3 box-ordinal-group 属性 实例 指定的一个box的子元素的显示顺序： .box{display:-ms-flexbox; /* Internet Explorer 10 */ display:-moz-box; /* Firefox */display:-webkit-box; /* Safari and Chrome */display:box;border:1px solid b..
CSS3 box-orient 属性 实例 指定div元素的子元素横向排列： div { width:350px; height:100px; border:1px solid black; /* Firefox */ display:-moz-box; -moz-box-orient:horizontal; /* Safari, Opera, and Chrome */ display:-web..
CSS3 box-pack 属性 实例 对div中的子元素同时使用box-align和box-pack的居中属性： div{width:350px;height:100px;border:1px solid black; /* Internet Explorer 10 */display:-ms-flexbox;-ms-flex-pack:center; -ms-flex-align:center;/* Fi..
CSS3 box-shadow 属性 实例 向 div 元素添加阴影： [mycode3 type='css'] div { box-shadow: 10px 10px 5px #888888; } [/mycode3] 尝试一下 » 在本页底部查看更多实例。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该..
CSS3 box-sizing 属性 实例 元素的总高度和宽度包含内边距和边框(padding 与 border) : [mycode3 type='css'] #example1 { box-sizing: border-box; } [/mycode3] 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字..
CSS3 column-count 属性 实例 把div元素中的文本划分成三列： div { column-count:3;-moz-column-count:3; /* Firefox */ -webkit-column-count:3; /* Safari and Chrome */ } 尝试一下 » 在此页底部有更多的例子。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 ..
CSS3 column-fill 属性 实例 指定如何填充列： div { column-fill:auto; } 在此页底部有更多的例子。 浏览器支持 表格中的数字表示支持该方法的第一个浏览器的版本号。 属性 column-fill 不支持 不支持 ..
CSS3 column-gap 属性 实例 指定列之间的的间隙为 40 个像素： [mycode3 type='css'] div { column-gap: 40px; } [/mycode3] 尝试一下 » 在此页底部有更多的例子。 浏览器支持 属性 column-gap ..
CSS3 column-rule-color 属性 实例 指定列之间的颜色规则： div { column-rule-color:#ff0000;-moz-column-rule-color:#ff0000; /* Firefox */ -webkit-column-rule-color:#ff0000; /* Safari and Chrome */ } 尝试一下 » 在此页底部有更多的例子。 ..
CSS3 column-rule-style 属性 实例 指定列之间的样式规则： div { column-rule-style:dotted;-moz-column-rule-style:dotted; /* Firefox */ -webkit-column-rule-style:dotted; /* Safari and Chrome */ } 尝试一下 » 在此页底部有更多的例子。 ..
CSS3 column-rule-width 属性 实例 指定列之间的宽度规则： [mycode3 type='css'] div { -webkit-column-rule-width: 1px; /* Chrome, Safari, Opera */ -moz-column-rule-width: 1px; /* Firefox */ column-rule-width: 1px;..
CSS3 column-rule 属性 实例 指定列之间的规则：宽度，样式和颜色： div { column-rule:3px outset #ff00ff;-moz-column-rule:3px outset #ff00ff; /* Firefox */ -webkit-column-rule:3px outset #ff00ff; /* Safari and Chrome */ } 尝试一下 ..
CSS3 column-span 属性 实例 设置h2中的所有span元素 h2 { column-span:all;-webkit-column-span:all; /* Safari and Chrome */ } 尝试一下 » 在此页底部有更多的例子。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀..
CSS3 column-width 属性 实例 指定列的宽度： div { column-width:100px;-moz-column-width:100px; /* Firefox */ -webkit-column-width:100px; /* Safari and Chrome */ } 尝试一下 » 在此页底部有更多的例子。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器..
CSS3 columns 属性 实例 指定列的宽度和数量： [mycode3 type='css'] div { columns:100px 3; -webkit-columns:100px 3; /* Safari and Chrome */ -moz-columns:100px 3; /* Firefox */ } [/mycode3] 尝试一下 » 在此页底部有更多的例子。 浏览器支持 表..
CSS3 filter(滤镜) 属性 实例 修改所有图片的颜色为黑白 (100% 灰度): img { -webkit-filter: grayscale(100%); /* Chrome, Safari, Opera */ filter: grayscale(100%);} 尝试一下..