前言

本节介绍仅在CSS3中的新内容，例如圆角边框、盒子阴影等等。

一、圆角边框

（一）border-×-×-radius

可以通过border-top/bottom-left/right-radius属性来对边框的四个角进行圆角处理，前提是要定义border属性，即有边框才有效。
从边框的四个角分为以下四个属性：
border-top-left-radius:（左上角圆角）
border-top-right-radius:（右上角圆角）
border-bottom-left-radius:（左下角圆角）
border-bottom-right-radius:（右下角圆角）

这里的radius即为圆角，它一般通过两个数值来设置圆角的弧度，第一个数值是水平距离，第二个数值是垂直距离，如下图，：

例如，下列html代码和css代码：
css代码：

* {margin: 0;padding: 0;
}div {width: 300px;height: 250px;border: 3px solid green;background-color: azure;border-top-left-radius: 20px 20px;border-bottom-right-radius: 20px;
}

html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/style.css" />
</head><body><div>HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W.Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台 (如UNIX， Windows等)。</div>
</body></html>

运行结果如下，可看到我们设置的圆角边框：

（二）border-radius

当然也可以只设置其中一个值或三个值以及四个值，一个值即代表四个圆角的值相同，设置三个值时，左右两个值表示左上角和右下角，之间的值表示右上角和左下角。
不指定圆角方向时，即border-radius:，这样设置就是对默认四个圆角弧度进行处理，如下：

* {margin: 0;padding: 0;
}div {width: 500px;height: 50px;border: 3px solid green;background-color: azure;border-radius: 20px;
}

运行结果如下：

二、阴影

（一）基本阴影设置

通过box-shadow:属性对边框进行阴影处理，其值有以下常见几种：
box-shadow:h-shadow（定义水平阴影偏移值，可以为负值）
box-shadow:v-shadow（定义垂直阴影偏移值，可以为负值）
box-shadow:blur（定义阴影的模糊大小）
box-shadow:spread（定义阴影的大小）
box-shadow:color（定义阴影的颜色）
例如，下列html代码和css代码：
css代码中，设置水平阴影和垂直阴影都为10px，模糊大小为2px，阴影大小为5px，颜色为特定值：

* {margin: 0;padding: 0;
}div {width: 300px;height: 250px;border: 3px solid green;background-color: azure;box-shadow: 10px 10px 2px 5px rgb(177, 177, 177);
}

hrml代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" href="../CSS/style.css" />
</head><body><div>HTML的英文全称是 Hyper Text Markup Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W.Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台 (如UNIX， Windows等)。</div>
</body></html>

运行结果如下：

（二）内部阴影设置

另外还有box-shadow:inset值，它是设置阴影为内部阴影，默认情况下，该值是box-shadow:outside，即阴影为外部阴影。
例如，css代码中，设置水平和垂直偏移为负数，并加上设置为内部阴影box-shadow:inset值：

* {margin: 0;padding: 0;
}div {width: 300px;height: 250px;border: 3px solid green;background-color: azure;box-shadow: -10px -10px 2px 5px rgb(177, 177, 177) inset;
}

运行结果如下：

结语

以上就是全部内容，篇幅较长，感谢您的阅读和支持，若有表述或代码中有不当之处，望指出！您的指出和建议能给作者带来很大的动力！！！

Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影相关推荐

Web前端开发笔记——第三章 CSS语言第四节 CSS列表、表格样式
目录一.CSS列表样式 (一)设计列表项前标志类型 (二)设计列表项前标志位置 (三)设计列表项图片 (四)设计整体列表属性二.CSS表格样式 (一)设计表格大小 (二)设计表格边框 (三)奇偶选 ...
Web前端开发笔记——第三章 CSS语言第六节 CSS定位
目录一.定义二.文档流定位 (一)block类型元素 (二)inline类型元素 (三)inline-block类型元素三.浮动定位 (一)左浮动和右浮动 (二)清除浮动四.层定位 (一)st ...
Web前端开发笔记——第三章 CSS语言第五节盒子模型
目录一.CSS布局与定位二.盒子模型三.盒子模型的组成四.设置边框的属性五.设置外.内边距的属性六.overflow 属性结语一.CSS布局与定位在CSS中对一个网页进行布局与定位, ...
Web前端开发笔记——第三章 CSS语言第一节 CSS的基本概念和样式表
目录一.CSS和HTML 二.CSS的基本语法格式三.CSS样式设置 (一)行内样式 (二)内嵌样式 (三)引用外部CSS文件四.多重样式优先级结语一.CSS和HTML CSS,又称为层叠样 ...
Web前端开发笔记——第三章 CSS语言第三节文本、字体、背景、超链接样式属性
目录一.CSS文本属性二.CSS字体属性 (一)常用文本字体样式属性 (二)设置整体font属性三.CSS背景属性 (一)背景颜色 (二)背景图片 (三)图片平铺方式 (四)图片位置 (五)设置 ...
Web前端开发笔记——第三章 CSS语言第八节 CSS3文本文字设置
目录前言一.文本阴影二.强制换行三.字体设置结语前言本节中的仅支持CSS3中的新语法,比如文字的阴影.长文本的换行等等. 一.文本阴影通过定义text-shadow来对文本进行阴影设置 ...
Web前端开发笔记——第三章 CSS语言第二节 CSS选择器
目录前言一.CSS选择器 (一)标签选择器 (二)id选择器 (三)类别选择器二.针对标签的选择器嵌套三.集体声明和全局声明 (一)集体声明 (二)全局声明结语前言 CSS代码由选择器和一 ...
Web前端开发笔记——第四章 JavaScript程序设计第五节数组
目录一.数组的创建 (一)Array()构造函数 (二)字面量方法二.数组元素的读写和遍历三.添加和删除数组元素 (一)添加数组元素 (二)删除数组元素 (三)splice()方法四.二维数组 ...
Web前端开发笔记——第四章 JavaScript程序设计第四节条件语句和循环语句
目录一.if条件语句二.while循环语句 (一)while()语句 (二)do--while语句三.for循环语句四.switch语句五.break语句和continue语句一.if条件 ...

Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影

目录

前言

一、圆角边框

（一）border-×-×-radius

（二）border-radius

二、阴影

（一）基本阴影设置

（二）内部阴影设置

结语

Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影相关推荐

最新文章

热门文章

Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影

目录

前言

一、圆角边框

（一）border-×-×-radius

（二）border-radius

二、阴影

（一）基本阴影设置

（二）内部阴影设置

结语

Web前端开发笔记——第三章 CSS语言 第七节 圆角边框、阴影相关推荐

最新文章

热门文章

Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影

Web前端开发笔记——第三章 CSS语言第七节圆角边框、阴影相关推荐