Learning Path
浏览 CSS 参考手册 相关教程与章节。
HTML、CSS、JavaScript、浏览器 API、前端框架与 UI 工程。
教程
319
CSS repeating-conic-gradient() 函数 CSS 函数 实例 创建一个重复的圆锥渐变： [mycode3 type='css'] #grad { background-image: repeating-conic-gradient(red 10%, yellow 20%); } [/mycode3] 尝试一下 » 定义与用法 repeating-conic-gradien..
CSS repeating-linear-gradient() 函数 CSS 函数 实例 重复的线性渐变: [mycode3 type='css'] #grad { background-image: repeating-linear-gradient(red, yellow 10%, green 20%); } [/mycode3] 尝试一下 » 定义与用法 repeating-linear..
CSS repeating-radial-gradient() 函数 CSS 函数 实例 重复的径向渐变: [mycode3 type='css'] #grad { background-image: repeating-radial-gradient(red, yellow 10%, green 15%); } [/mycode3] 尝试一下 » 定义与用法 repeating-radial..
CSS rgb() 函数 CSS 函数 实例 使用 RGB 颜色： [mycode3 type='css'] #p1 {background-color:rgb(255,0,0);} /* 红 */ #p2 {background-color:rgb(0,255,0);} /* 绿 */ #p3 {background-color:rgb(0,0,255);} /* 蓝 */ [/mycode3] 尝试一下 ..
CSS rgba() 函数 CSS 函数 实例 使用 RGBA 颜色，并使用透明度： [mycode3 type='css'] #p1 {background-color:rgba(255,0,0,0.3);} /* 红 */ #p2 {background-color:rgba(0,255,0,0.3);} /* 绿 */ #p3 {background-color:rgba(0,0,255,0.3);} /..
CSS var() 函数 CSS 函数 实例 定义一个名为 '--main-bg-color' 的属性，然后使用 var() 函数调用该属性： [mycode3 type='css'] :root { --main-bg-color: coral; } #div1 { background-color: var(--main-bg-color); } #div2 { back..
CSS background-attachment 属性 实例 如何指定一个固定的背景图像： [mycode3 type='css'] body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; } [/mycode3] ..
CSS background-blend-mode 属性 实例 混合模式: div { width: 290px; height: 69px; background-size: 290px 69px; &nb..
CSS background-color 属性 实例 设置不同元素的背景色： [mycode3 type='css'] body { background-color:yellow; } h1 { background-color:#00ff00; } p { background-color:rgb(255,0,255); } [/mycode3] 尝试一下 » 标签定义及使..
CSS background-image 属性 实例 设置body元素的背景图像： [mycode3 type='css'] body { background-image:url('paper.gif'); background-color:#cccccc; }[/mycode3] 尝试一下 » 标签定义及使用说明 background-image 属性设置一..
CSS background-position 属性 实例 如何定位 background-image： [mycode4 type='css'] body { background-image:url('smiley.gif'); background-repeat:no-repeat; background-attachment:fixed; backg..
CSS background-repeat 属性 实例 只有垂直方向重复 background-image： [mycode3 type='css'] body { background-image:url('paper.gif'); background-repeat:repeat-y; } [/mycode3] 尝试一下 » 标签定义及使用说明 设置如何平铺..
CSS border-bottom-color 属性 实例 设置底部边框颜色： [mycode3 type='css'] p { border-style:solid; border-bottom-color:#ff0000; } [/mycode3] 尝试一下 » 标签定义及使用说明 border-bottom-color属性设置元素的底部边框颜色。 注意 使用border-bottom颜..
CSS border-bottom-style 属性 实例 设置底部边框样式： [mycode3 type='css'] p { border-style:solid; border-bottom-style:dotted; } [/mycode3] 尝试一下 » 属性定义及使用说明 border-bottom-style属性设置元素底部边框样式。 默认值: not..
CSS border-bottom-width 属性 实例 设置底部边框宽度： [mycode3 type='css'] p { border-style:solid; border-bottom-width:15px; } [/mycode3] 尝试一下 » 属性定义及使用说明 border-bottom-width属性设置元素的底部边框宽度。 注意务必先声明border-s..
CSS border-bottom 属性 实例 设置底部边框样式： [mycode3 type='css'] p { border-style:solid; border-bottom:thick dotted #ff0000; } [/mycode3] 尝试一下 » 标签定义及使用说明 border-bottom缩写属性设置一个声明中所有底部边框属性。 可以设置的属性分别（按顺序）..
CSS border-collapse 属性 实例 为表格设置合并边框模型： [mycode3 type='css'] table { border-collapse:collapse; }[/mycode3] 尝试一下 » 属性定义及使用说明 border-collapse 属性设置表格的边框是否被合并为一个单一的边框，还是像在标准的 HTML 中那样分开显示。 默认值..
CSS border-color 属性 实例 设置四个边框颜色： p { border-style:solid; border-color:#ff0000 #0000ff; } 尝试一下 » 属性定义及使用说明 border-color属性设置一个元素的四个边框颜色。此属性可以有一到四个值。 实例: border-color:红，绿，蓝,粉红色; 上边框是红色 右边框是绿色 底部边框是蓝 ..
CSS border-left-color 属性 实例 设置左边框颜色： [mycode3 type='css'] p { border-style:solid; border-left-color:#ff0000 } [/mycode3] 尝试一下 » 属性定义及使用说明 border-left-color属性设置一个元素的左边框颜色。 注意 请始终把border-style属性声明到b..
CSS border-left-style 属性 实例 设置左边框的样式： [mycode3 type='css'] p { border-style:solid; border-left-style:dotted; } [/mycode3] 尝试一下 » 属性定义及使用说明 border-left-style 设置元素左边框的样式。 默认值： not specif..
CSS border-left-width 属性 实例 设置左边框的宽度： [mycode3 type='css'] p { border-style:solid; border-left-width:15px; } [/mycode3] 尝试一下 » 属性定义及使用说明 border-left-width 属性设置元素的左边框的宽度。 只有当边框样式不是 none 时才起作用。如果边框样式..
CSS border-left 属性 实例 设置左边框的样式： [mycode3 type='css'] p { border-style:solid; border-left:thick double #ff0000; } [/mycode3] 尝试一下 » 属性定义及使用说明 border-left 简写属性把左边框的所有属性设置到一个声明中。 可以按顺序设置如下属性： bord..
CSS border-right 属性 实例 设置右边框的样式： [mycode3 type='css'] p { border-style:solid; border-right:thick double #ff0000; } [/mycode3] 尝试一下 » 属性定义及使用说明 border-right 简写属性把右边框的所有属性设置到一个声明中。 可以设置的属性是（按顺序）..
CSS border-right-color 属性 实例 设定右边框的颜色： [mycode3 type='css'] p { border-style:solid; border-right-color:#ff0000 } [/mycode3] 尝试一下 » 属性定义及使用说明 border-right-color属性设置一个元素的的右边框的颜色。 注意 请始终把 bord..