4.2 CSS圆角边框、盒子阴影和文字阴影

怼烎@ 2023-01-16 03:27 190阅读 0赞

**声明**：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址：

1.  H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教程 HTML5+CSS3+移动端布局-flex布局rem布局响应式布局摹客蓝湖使用-简单有趣好玩][_pink_ HTML5_CSS3_-flex_rem_-]
2.  JavaScript系列 ：[JavaScript基础语法-dom/bom-es6-jQuery-数据可视化echarts-包含笔记源码作业黑马程序员pink老师前端入门视频教程（持续更新）][JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]

### 文章目录 ###

*   *  1.圆角边框
     *  2.盒子阴影（重点）
     *  3. 文字阴影（了解）

--------------------

## 1.圆角边框 ##

在CSS3中，新增了圆角边框样式，这样我们的盒子就可以变圆角了。

border-radius属性用于设置元素的外边框圆角。

border-radius: length;

radius半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果

![\[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-roAh358D-1619184193537)(C:\\Users\\lp\\AppData\\Roaming\\Typora\\typora-user-images\\image-20210423205124322.png)\]][img-roAh358D-1619184193537_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210423205124322.png]

*  参数值可以为数值（例如10px）也可以采用百分比的形式
 *  **设置圆形的方式**：设置length为正方形盒子的边长的一半或者直接写成50%；
 *  **设置圆角矩形的方式**：如果是个矩形，直接设置length为高度的一半
 *  该属性是一个简写属性，可以跟1个，2个，3个和4个值，与边距的复合属性类似，都是按照顺时针方向，即左上角，右上角，右下角，左下角
 *  也可以每个角都单独设置，例如只想要改一左上角，可以设置：boder-top-left-radius: 10px;

## 2.盒子阴影（重点） ##

CSS3中新增了盒子阴影，可以使用box-shadow属性为盒子添加阴影

box-shadow: h-shadow v-shadow blur spread color inset;

<table> 
 <thead> 
  <tr> 
   <th align="center">值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">h-shadow</td> 
   <td align="center">必需，水平阴影的位置，允许负值</td> 
  </tr> 
  <tr> 
   <td align="center">v-shadow</td> 
   <td align="center">必需，垂直阴影的位置，允许负值</td> 
  </tr> 
  <tr> 
   <td align="center">blur</td> 
   <td align="center">可选，模糊距离(阴影的虚实)</td> 
  </tr> 
  <tr> 
   <td align="center">spread</td> 
   <td align="center">可选，阴影的尺寸</td> 
  </tr> 
  <tr> 
   <td align="center">color</td> 
   <td align="center">可选，阴影的颜色</td> 
  </tr> 
  <tr> 
   <td align="center">inset</td> 
   <td align="center">可选，将外部阴影（outset）改为内部阴影</td> 
  </tr> 
 </tbody> 
</table>

*  默认的是外阴影(outset)，但是不可以写这个单词，否则会导致阴影无效；
 *  盒子阴影不占用空间，不会影响其他盒子的排列；

**原先盒子没有阴影，当鼠标经过时给盒子添加阴影：**

div: hover {
        
        box-shadow: 10px 10px 10px -4px rgba(0,0,0,.3);
    }

## 3. 文字阴影（了解） ##

在CSS3中，可以使用text-shadow属性设置文字的阴影

text-shadow: h-shadow v-shadow blur color;

<table> 
 <thead> 
  <tr> 
   <th align="center">值</th> 
   <th align="center">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">h-shadow</td> 
   <td align="center">必需，水平阴影的位置，允许负值</td> 
  </tr> 
  <tr> 
   <td align="center">v-shadow</td> 
   <td align="center">必需，垂直阴影的位置，允许负值</td> 
  </tr> 
  <tr> 
   <td align="center">blur</td> 
   <td align="center">可选，模糊距离(阴影的虚实)</td> 
  </tr> 
  <tr> 
   <td align="center">color</td> 
   <td align="center">可选，阴影的颜色</td> 
  </tr> 
 </tbody> 
</table>

[_pink_ HTML5_CSS3_-flex_rem_-]: https://www.bilibili.com/video/BV14J4114768?spm_id_from=333.788.b_636f6d6d656e74.6
[JavaScript_-dom_bom-es6-jQuery-_echarts-_pink]: https://www.bilibili.com/video/BV1Sy4y1C7ha?spm_id_from=333.788.b_636f6d6d656e74.7
[img-roAh358D-1619184193537_C_Users_lp_AppData_Roaming_Typora_typora-user-images_image-20210423205124322.png]: /images/20221022/126b3bc90ef045a883067778fa67d129.png