Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS3 text-wrap 属性 实例 Allow no line breaks: p.test {text-wrap:none;} 尝试一下 » 浏览器支持 任何主流浏览器都不支持text-wrap属性。 属性定义及使用说明 text-wrap属性指定文本换行规则。 默认值： normal 继承： yes 版本： CSS3 JavaScr..
CSS3 transform-origin 属性 实例 设置旋转元素的基点位置： div { transform: rotate(45deg); transform-origin:20% 40%; -ms-transform: rotate(45deg); /* IE 9 */ -ms-transform-origin:20% 40%; /* IE 9 */ -webkit-transform: ro..
CSS3 transform-style 属性 实例 让转换的子元素保留3D转换： [mycode3 type='css'] div { transform: rotateY(60deg); transform-style: preserve-3d; -webkit-transform: rotateY(60deg); /* Safari and Chrome */ -webkit-transfor..
CSS3 transform 属性 实例 旋转 div 元素： [mycode3 type='css'] div { transform:rotate(7deg); -ms-transform:rotate(7deg); /* IE 9 */ -webkit-transform:rotate(7deg); /* Safari and Chrome */ } [/mycode3] 尝..
CSS3 transition-delay 属性 实例 等待2秒前切换效果开始： transition-delay: 2s; -webkit-transition-delay: 2s; /* Safari */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。 ..
CSS3 transition-duration 属性 实例 最后5秒出现切换效果： transition-duration: 5s; -webkit-transition-duration: 5s; /* Safari */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 -webkit-, -ms- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。..
CSS3 transition-property属性 实例 将鼠标悬停在一个div元素上，逐步改变表格的宽度： [mycode3 type='css'] div { width:100px; height:100px; background:red; transition-property: width; transition-durati..
CSS3 transition-timing-function 属性 实例 过渡效果以同样的速度从开始到结束： transition-timing-function: linear; -webkit-transition-timing-function: linear; /* Safari and Chrome */ 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 紧跟在 ..
CSS3 transition 属性 实例 将鼠标悬停在一个 div 元素上，逐步改变表格的宽度从 100px 到 300px： [mycode3 type='css'] div { width:100px; transition: width 2s; -webkit-transition: width 2s; /* Safari */ } div:hover {width:300p..
CSS3 word-break 属性 实例 在合适的点换行： p.test {word-break:break-all;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 word-break 4.0 5.5 15.0 ..
CSS3 word-wrap 属性 实例 指定如果足够长得话，应该换行： p.test {word-wrap:break-word;} 尝试一下 » 浏览器支持 表格中的数字表示支持该属性的第一个浏览器版本号。 属性 word-wrap 4.0 5.5 3...
CSS attr() 函数 CSS 函数 实例 以下实例在每个链接后面插入内容： [mycode3 type='css'] a:after { content: ' (' attr(href) ')'; } [/mycode3] 尝试一下 » 定义与用法 attr() 函数返回选择元素的属性值。 支持版本：CSS2 浏览器支持 表格中的数字表示支持该..
CSS calc() 函数 CSS 函数 实例 使用 calc() 函数计算 <div> 元素的宽度: [mycode3 type='css'] #div1 { position: absolute; left: 50px; width: calc(100% - 100px); border: 1px solid black; backgrou..
CSS conic-gradient() 函数 CSS 函数 实例 三种颜色的圆锥渐变： [mycode3 type='css'] #grad { background-image: conic-gradient(red, yellow, green); } [/mycode3] 尝试一下 » 定义与用法 conic-gradient() 函数创建一个由渐变组成的图像。 圆锥渐变是颜色过渡围绕中心..
CSS counter() 函数 CSS 函数 实例 在页面中创建一个计数器（在 body 选择器中），增加每个 <h3> 元素的计数器值，并在每个 <h3> 元素之前添加文本 “Section 计数器值”： [mycode3 type='css'] body { counter-reset: section; /* 重置计数器成0..
CSS cubic-bezier() 函数 CSS 函数 实例 从开始到结束的不同速度过渡效果： [mycode3 type='css'] div { width: 100px; height: 100px; background: red; transition: width 2s; transition-timing-function: cubic-bezier(0.1, 0.7, 1...
CSS hsl() 函数 CSS 函数 实例 定义 HSL 颜色： [mycode3 type='css'] #p1 {background-color:hsl(120,100%,50%);} /* 绿色 */ #p2 {background-color:hsl(120,100%,75%);} /* 浅绿 */ #p3 {background-color:hsl(120,100%,25%);} /* 暗绿 ..
CSS hsla() 函数 CSS 函数 实例 定义 HSL 颜色，并设置透明度： [mycode3 type='css'] #p1 {background-color:hsl(120,100%,50%,0.3);} /* 绿色 */ #p2 {background-color:hsl(120,100%,75%,0.3);} /* 浅绿 */ #p3 {background-color:hsl(120,100..
CSS linear-gradient() 函数 CSS 函数 实例 以下实例演示了从头部开始的线性渐变，从红色开始，转为黄色，再到蓝色: [mycode3 type='css'] #grad { background-image: linear-gradient(red, yellow, blue); } [/mycode3] 尝试一下 » 定义与用法 linear-gradient() 函..
CSS max() 函数 CSS 函数 实例 使用 max() 函数将 #div1 的宽度设置为最大的值，取 50% 或 300px 的最大值： [mycode3 type='css'] #div1 { background-color: yellow; height: 100px; width: max(50%, 300px); } [/mycode3] 尝试一下 » 定义与用法 max..
CSS min() 函数 CSS 函数 实例 使用 min() 函数将 #div1 的宽度设置为最小的值，取 50% 或 300px 的最小值： [mycode3 type='css'] #div1 { background-color: yellow; height: 100px; width: min(50%, 300px); } [/mycode3] 尝试一下 » 定义与用法 min..
CSS minmax() 函数 CSS 函数 实例 设置元素的长宽范围： [mycode3 type='css'] #container { display: grid; grid-template-columns: minmax(max-content, 300px) minmax(200px, 1fr) 150px; grid-gap: 5px; box-sizing..
CSS radial-gradient() 函数 CSS 函数 实例 以下实例演示了径向渐变 - 颜色结点均匀分布: [mycode3 type='css'] #grad { background-image: radial-gradient(red, green, blue); } [/mycode3] 尝试一下 » 定义与用法 radial-gradient() 函数用径向渐变创建 “图像..
CSS repeat() 函数 CSS 函数 实例 重复轨道列表的片段： [mycode3 type='css'] #container { display: grid; grid-template-columns: repeat(2, 50px 1fr) 100px; grid-gap: 5px; box-sizing: border-box; height: 200p..