CSS3 box-sizing 属性可以设置 width 和 height 属性中包含了 padding(内边距) 和 border(边框)。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器的版本号。 紧跟在数字后面的 -webkit- 或...

CSS2 多媒体类型 @media 规则在 CSS2 中有介绍，针对不同媒体类型可以定制不同的样式规则。 例如：你可以针对不同的媒体类型(包括显示器、便携设备、电视机，等等)设置不同的样式规则...

本章节我们将为大家演示一些多媒体查询实例。 开始之前我们先制作一个电子邮箱的链接列表。HTML 代码如下： 实例 1 !DOCTYPE htmlhtmlheadstyleul { list-style-type: none;}ul li a { color: green; text-...

网格是一组相交的水平线和垂直线，它定义了网格的列和行。 CSS 提供了一个基于网格的布局系统，带有行和列，可以让我们更轻松地设计网页，而无需使用浮动和定位。 以下是一个简...

尝试一下 » 网格容器 要使 HTML 元素变成一个网格容器，可以将 display 属性设置为 grid 或 inline-grid 。 网格容器内放置着由列和行内组成的网格元素。 grid-template-columns 属性 grid-template-...

尝试一下 » CSS 网格元素 网格容器包含了一个或多个网格元素。 默认情况下，网格容器的每一列和每一行都有一个网格元素，我们也可以设置网格元素跨越多个列或行，行和列为行号。...

实例 指定作为div元素周围边框的图像： #borderimg { -webkit-border-image: url(border.png) 30 round; /* Safari 3.1-5 */ -o-border-image: url(border.png) 30 round; /* Opera 11-12.1 */ border-image: url(border.png) 30 round;} 尝试...

菜鸟教程(runoob.com) 实例 给两个 div 元素添加圆角的边框： #example1 { border: 2px solid red; border-radius: 25px;} #example2 { border: 2px solid red; border-radius: 50px 20px;} 尝试一下 » 浏览器支持 表格中的数...

实例 向 div 元素添加阴影： div{ box-shadow: 10px 10px 5px #888888;} 尝试一下 » 在本页底部查看更多实例。 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-,...

实例 为div元素的左上角添加一个圆角边框： div{border:2px solid;border-top-left-radius:2em;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或...