• 在css3中如何添加圆角边框、盒子阴影以及文字阴影

    注：在css3中如何添加圆角边框、盒子阴影以及文字阴影

    一、圆角边框

    在 CSS3 中，新增了圆角边框样式这样我们的盒子就可以变圆角了。
    border-radius 属性用于设置元素的外边框圆角。
    语法:

    border-radius:length;

    • 参数值可以为数值或百分比的形式

    • 如果是正方形，想要设置为一个圆，把数值修改为高度或者宽度的一半即可，或者直接写为 50%

    • 该属性是一个简写属性，可以跟四个值，分别代表左上角、右上角.右下角、左下角

    • 分开写:border-top-left-radius、border-top-right-radius、 border-bottom-right-radius 和border-bottom-left-radius

    案例：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         div{
    9.             width: 200px;
    10.             height: 200px;
    11.             background-color: aquamarine;
    12.             border-radius: 100px;
    13.         }
    14.     </style>
    15. </head>
    16. <body>
    17.     <div></div>
    18. </body>
    19. </html>

     

     二、盒子阴影

    CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴景乡。
    语法:

    box-shadow:h-shadowv-shadow blurspread  color inset；
    值描述

    h-shadow

    必需。水平阴影的位置，允许负值

    v-shadow

    必需。垂直阴影的位置。允许负值

    blur

    可选。模糊距离。

    spread

    可选。阴影的尺寸。

    color

    可选。阴影的颜色。请参考css的颜色值。

    inset

    可选。将外部阴影（outset）改为内部阴影。

    注意：

    1、默认的是外阴影(outset), 但是不可以写这个单词,否则造成阴影无效

    2、盒子阴影不占用空间，不会影响其他盒子排列。

    案例：

     

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    6.     <title>Document</title>
    7.     <style>
    8.         div{
    9.             width: 300px;
    10.             height: 300px;
    11.             background-color: #fed8d8;
    12.             border: 1px solid  firebrick;
    13.             box-shadow: 0px  8px  15px  10px  rgb(0, 0, 0);
    14.             /* inset 可选。将外部阴影改为内部阴影 */
    15.             /* spread 可选阴影范围（调整大小） */
    16.             /* blur 可选模糊距离 */
    17.             /* v-shadow 必需，垂直的阴影的位置，允许负值 */
    18.             /* h-shadow 必需，水平阴影的位置，允许负值 */
    19.             
    20.         }
    21.     </style>
    22. </head>
    23. <body>
    24.     <div></div>
    25. </body>
    26. </html>

    三、文字阴影

    在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。

    语法：

    1. text-shadow: h-shadow v-shadow blur color;
    2. text-shadow: 水平位置 垂直位置 模糊距离（大糊小清） 阴影的颜色

    值

    描述

    h-shadow

    必需。水平阴影位置。允许负值

    v-shadow

    必需。垂直阴影的位置。允许负值

    blur

    可选。模糊的U距离

    color

    可选。阴影的颜色。参阅css的颜色值

    案例：

    1. <style>
    2.         div{
    3.             font-size: 20px;
    4.             font-weight: 10px;
    5.             text-shadow: 20px  10px   6px   gold;
    6.      /* text-shadow: 水平位置  垂直位置  模糊距离（大糊小清） 阴影的颜色; */
    7.      
    8.         }
    9.     </style>

  • 相关阅读:
    一本通1084；幂的末尾
    制造企业如何做好MES管理系统需求分析
    集成测试、单元测试、系统测试的概念你都了解吗？
    第五十周总结——JavaScript设计模式
    下载文件流
    Greenplum-内存配置概述
    【单目标优化求解】基于matlab蒲公英算法求解单目标优化问题【含Matlab源码 2133期】
    算法——二叉树应用
    448. 找到所有数组中消失的数字
    力扣227题基本计算器II（Python实现）
  • 原文地址：https://blog.csdn.net/J3259392566/article/details/137284628