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

红太狼 2022-11-22 12:51 239阅读 0赞

### 圆角边框 ###

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

语法：

border-radius: length;

写一个矩形的盒子，然后设置`border-radius: 50%`即可得到圆形。

圆角矩形可以设置length属性为高的一半

length部分参数可以为1个，2个，3个或4个，参数为一个则修改四个角，参数为两个则对角线相同，参数为四个则从左上开始顺时针修改。

可以用border-top-left-radius、border-top-right-radius、border-bottom-left-radius、border-bottom-right-radius只修改其中一个角的参数。

### 盒子阴影 ###

box-shadow属性用于为盒子添加阴影

语法：

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

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

可以用`div:hover{}`设置鼠标经过时出现阴影。

### 文字阴影 ###

text-shadow属性用于为文字添加阴影。

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

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS3-盒子阴影

CSS3 新增了 `box-shadow` 样式属性用来给元素设置一个或多个下拉阴影的框；该属性可以设置多个属性值语法： box-shadow: h-shadow

分手后的思念是犯贱/ 2023年06月02日 09:15/ 0 赞/ 136 阅读

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

声明：本人前端学习笔记的所有内容均为b站上pink老师课程的学习笔记，如果想详细了解的可以搜索以下网址： 1. H5C3+移动布局：[ 黑马程序员pink老师前端入门视频教

怼烎@/ 2023年01月16日 03:27/ 0 赞/ 173 阅读

相关圆角边框、盒子阴影和文字阴影

圆角边框 border-radius属性用于设置元素饿外边框圆角。语法： border-radius: length; 写一个矩形的盒子，然后设置`bor

红太狼/ 2022年11月22日 12:51/ 0 赞/ 240 阅读

相关前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影

css样式表/层叠样式表（3）（1）盒子模型（2）盒子边框（3）表格的细线边框（4）内边距padding 内盒尺寸计算（元素实

川长思鸟来/ 2022年11月09日 15:29/ 0 赞/ 253 阅读

相关 CSS 边框阴影效果

\shadow1\{ width: 200px; height: 100px; color: white; background-color: red

川长思鸟来/ 2022年09月27日 13:28/ 0 赞/ 322 阅读

相关盒子模型轮廓，阴影，圆角

轮廓：属性名：outline 属性值：宽度颜色样式与border类似，不同点：outline不会影响到其他元素 .out{

浅浅的花香味﹌/ 2022年09月02日 04:26/ 0 赞/ 225 阅读

相关 css3-边框圆角阴影等属性

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

谁借莪１个温暖的怀抱￠/ 2022年07月14日 00:43/ 0 赞/ 297 阅读

相关盒子阴影box-shadow和文本阴影text-shadow

相关的说明和介绍都写在了注释中： <!DOCTYPE html> <html lang="en"> <head> <meta ch

秒速五厘米/ 2022年06月12日 03:06/ 0 赞/ 226 阅读

相关 ios阴影圆角共存

先上图 ![Image 1][] Simulator Screen Shot - iPhone X - 2018-08-10 at 11.23.45.png 阴影和

布满荆棘的人生/ 2022年04月15日 05:22/ 0 赞/ 269 阅读

相关 css盒子阴影案例

<style> .box { position: relative; width

缺乏、安全感/ 2022年01月22日 23:29/ 0 赞/ 326 阅读