• CSS3 新增属性-边框圆角-文字阴影-盒子阴影

    边框圆角

    CSS 边框圆角可以通过 border-radius 属性来实现。该属性用于设置元素的圆角大小，支持四个值分别表示上左、上右、下右和下左四个角的圆角半径大小，也可以使用两个值分别表示上下和左右两个方向的圆角大小，甚至可以只使用一个值来表示所有四个角的圆角大小。

    下面是一个简单的示例，演示如何设置一个圆角矩形：

    1. html>
    2. <html>
    3. <head>
    4.   <style>
    5.     .box {
    6.       width: 200px;
    7.       height: 100px;
    8.       background-color: #f5f5f5;
    9.       border-radius: 10px;
    10.     }
    11.   style>
    12. head>
    13. <body>
    14.   <div class="box">div>
    15. body>
    16. html>

    上述代码会在页面中渲染出一个宽200px、高100px、背景颜色为 #f5f5f5 的圆角矩形，四个角的圆角半径大小都为 10px。

    可以使用不同的值来设置不同的圆角大小，例如：

    border-radius: 15px 5px 10px 20px;

    这将会分别设置四个角的圆角半径，从上左角开始，顺时针依次为上右角、下右角和下左角。

    还可以使用只有两个值的语法来设置上下和左右两个方向的圆角大小，例如：

    border-radius: 15px 10px;

    这将会将上下两个方向的圆角半径设置为 15px，左右两个方向的圆角半径设置为 10px。

    除此之外，还可以使用单独设置每个角的圆角半径的语法，例如：

    1. border-top-left-radius: 20px;
    2. border-top-right-radius: 10px;
    3. border-bottom-right-radius: 5px;
    4. border-bottom-left-radius: 15px;

    这将会分别设置元素的四个角的圆角半径大小。

    文字阴影

    CSS 文字阴影可以通过 text-shadow 属性来实现。该属性用于设置文本的阴影效果，支持设置多个值，每个值表示一个阴影效果，可以包括影子的颜色、位置和模糊半径等属性。

    下面是一个简单的示例，演示如何设置文字阴影：

    1. html>
    2. <html>
    3. <head>
    4.   <style>
    5.     h1 {
    6.       text-shadow: 2px 2px 4px #000000;
    7.     }
    8.   style>
    9. head>
    10. <body>
    11.   <h1>Hello, World!h1>
    12. body>
    13. html>

    上述代码会在页面中渲染出一个带有阴影效果的标题，阴影颜色为 #000000，位置向右和下方偏移 2px，模糊半径为 4px。

    可以将 text-shadow 属性的值设置为多个值，用逗号分隔，来实现多个阴影效果。例如：

    text-shadow: 2px 2px 4px #000000, -2px -2px 4px #ffffff;

    这将会同时设置两个阴影效果，一个向右和下方偏移 2px，阴影颜色为 #000000，模糊半径为 4px；另一个向左和上方偏移 2px，阴影颜色为 #ffffff，模糊半径为 4px。

    可以使用多个阴影效果来实现更复杂的效果，例如：

    text-shadow: 1px 1px 1px #000000, -1px -1px 1px #ffffff, 1px -1px 1px #ffffff, -1px 1px 1px #ffffff;

    这将会同时设置四个阴影效果，分别位于文本的四个角上，从而实现一种立体感的效果。

    盒子阴影

    CSS 盒子阴影可以通过 box-shadow 属性来实现。该属性用于为一个盒子元素添加阴影效果，支持设置多个值，每个值表示一个阴影效果，可以包括影子的颜色、位置、模糊半径、扩散半径等属性。

    下面是一个简单的示例，演示如何设置盒子阴影：

    1. html>
    2. <html>
    3. <head>
    4.   <style>
    5.     div {
    6.       box-shadow: 2px 2px 4px #000000;
    7.     }
    8.   style>
    9. head>
    10. <body>
    11.   <div>Hello, World!div>
    12. body>
    13. html>

    上述代码会在页面中渲染出一个带有阴影效果的 div 元素，阴影颜色为 #000000，位置向右和下方偏移 2px，模糊半径为 4px。

    可以将 box-shadow 属性的值设置为多个值，用逗号分隔，来实现多个阴影效果。例如：

    box-shadow: 2px 2px 4px #000000, -2px -2px 4px #ffffff;

    这将会同时设置两个阴影效果，一个向右和下方偏移 2px，阴影颜色为 #000000，模糊半径为 4px；另一个向左和上方偏移 2px，阴影颜色为 #ffffff，模糊半径为 4px。

    可以使用多个阴影效果来实现更复杂的效果，例如：

    box-shadow: 1px 1px 1px #000000, -1px -1px 1px #ffffff, 1px -1px 1px #ffffff, -1px 1px 1px #ffffff;

    这将会同时设置四个阴影效果，分别位于盒子的四个角上，从而实现一种立体感的效果。

    除了位置、颜色和模糊半径等基本属性外，box-shadow 还支持扩散半径（spread radius）等高级属性，例如：

    box-shadow: 2px 2px 4px 2px #000000;

    这将会为盒子元素添加一个4px 的模糊半径和2px 的扩散半径，使阴影更加细腻和立体。。

  • 相关阅读:
    求助帖：React Native failed installing Ruby Gems(rn 下载 Runby Gems 失败)
    计算机视觉项目实战-基于特征点匹配的图像拼接
    EN 12259-3喷水灭火系统干式报警阀组件—CE认证
    多维分析预汇总应该怎样做才管用？
    android studio启动Task配置
    巯基SH/氨基NH2/羧基COOH/PEG/蛋白Protein/抗体antibody修饰Au@TiO2 核壳纳米粒子 二氧化钛包裹金表面
    记一次 .NET 某拍摄监控软件 卡死分析
    [附源码]计算机毕业设计JAVA在线二手车交易信息管理系统
    JavaScript:实现二维向量以及各种向量操作算法（附完整源码）
    ubuntu20部署3d高斯
  • 原文地址：https://blog.csdn.net/zxcv321zxcv/article/details/133847221