圆角与阴影

CSS3 教程 · 第 2 章 · 9 次浏览

border-radius 给元素加圆角，是 CSS3 最常用的属性。它可以只设一个值（四角相同），也可以分别控制四个角。传四个值按顺时针：左上、右上、右下、左下。

box-shadow 阴影

语法：box-shadow: 水平偏移垂直偏移模糊半径扩散半径颜色。水平、垂直偏移正值向右下；模糊半径越大阴影越柔和；扩散半径控制阴影大小。还可以用 inset 做内阴影。

text-shadow 给文字加阴影，语法相同，但只有一层、没有扩散半径（新版支持）。

代码示例

.btn {
    border-radius: 999px;                 /* 胶囊按钮 */
    box-shadow: 0 4px 14px rgba(124,179,66,.4);
    /*          偏移  模糊  扩散  颜色       */
}

.card {
    border-radius: 16px 4px 16px 4px;     /* 四个角分别设置 */
    box-shadow: 0 2px 6px rgba(0,0,0,.1),
                inset 0 0 0 1px #eee;     /* 叠加外阴影+内描边 */
}

h1 { text-shadow: 2px 2px 4px rgba(0,0,0,.2); }

📚 CSS 属性速查

常用条目速查，完整版见对应教程章节。可复制代码到在线运行中测试。

写法 / 语法	作用
`color: #333;`	文字颜色
`background: #fff;`	背景色 / 背景图
`font-size: 16px;`	字号
`font-family: Arial;`	字体
`font-weight: bold;`	字重（加粗）
`margin: 10px;`	外边距（上右下左）
`padding: 10px;`	内边距
`border: 1px solid #ccc;`	边框：粗细样式颜色
`border-radius: 8px;`	圆角
`width: 100%;`	宽度
`height: 200px;`	高度
`display: flex;`	弹性布局（现代布局主力）
`display: none;`	隐藏元素
`position: relative / absolute / fixed;`	定位方式
`top / left / right / bottom`	定位偏移
`text-align: center;`	文字水平对齐
`line-height: 1.6;`	行高
`overflow: hidden;`	内容溢出处理
`box-shadow: 0 2px 8px rgba(0,0,0,.1);`	阴影
`transition: all .3s;`	过渡动画
`cursor: pointer;`	鼠标手型
`z-index: 10;`	层叠顺序
`max-width: 1200px; margin: 0 auto;`	容器居中（经典写法）
`@media (max-width: 768px) {}`	响应式断点
`:hover`	鼠标悬停状态