CSS3 —— CSS3 基础（边框、渐变、文本效果）-阿里云开发者社区

CSS3 —— CSS3 基础（边框、渐变、文本效果）

2023-06-14 81

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： CSS3 —— CSS3 基础（边框、渐变、文本效果）

一、边框

1. border-radius：圆角

创建圆角边框

  div {
        width: 100px;
        padding: 10px 40px;
        border-radius: 15px;
        border: 2px solid black;
    }
  <div>HELLO CSS3</div>

2. box-shadow：盒阴影

给盒子添加阴影

  div {
        width: 300px;
        height: 100px;
        background-color: lightblue;
        box-shadow: 10px 10px 5px #ccc;
    }
  <div></div>

3. border-image：边界图片

指定一个图片作为边框

  #round {
    border-image: url(border.png) 30 30 round;
  }
  #stretch {
    border-image: url(border.png) 30 30 stretch;
  }

二、渐变

1. 渐变（gradients）

可以让你在两个或多个指定的颜色之间显示平稳的过渡。

2. 线性渐变

至少定义两种颜色节点。

  background-image: linear-gradient(direction, color-stop1, color-stop2, ...);

线性渐变：从上到下（默认情况）

  #grad {
        height: 100px;
        background-image: linear-gradient(#e66465, #9198e5);
    }

线性渐变：从左到右

  #grad {
        height: 100px;
        background-image: linear-gradient(to right, #e66465, #9198e5);
    }

线性渐变：对角

  #grad {
        height: 100px;
        background-image: linear-gradient(to bottom right, #e66465, #9198e5);
    }

线性渐变：使用角度

  #grad {
        height: 100px;
        background-image: linear-gradient(-90deg, #e66465, #9198e5);
    }

线性渐变：使用透明度。使用 rgba() 函数。

  #grad {
        height: 100px;
        background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
    }

重复线性渐变：重复线性渐变，使用 repeating-linear-gradient() 函数。

  #grad {
        height: 100px;
        background-image: repeating-linear-gradient(red, yellow 10%, lightgreen 20% );
    }

3. 径向渐变

径向渐变由它的中心定义。创建一个径向渐变，也必须至少定义两种颜色节点。

  background-image: radial-gradient(shape size at position, start-color, ..., last-color);

径向渐变：颜色均匀分布

  #grad {
        width: 150px;
        height: 150px;
        background-image: radial-gradient(red, yellow, lightgreen);
    }

径向渐变：颜色节点不均匀分布

  #grad {
        width: 150px;
        height: 150px;
        background-image: radial-gradient(red 5%, yellow 20%, lightgreen 60%);
    }

径向渐变：shape 设置形状

circle：圆形
ellipse：椭圆形（默认）

  #grad {
        width: 200px;
        height: 150px;
        background-image: radial-gradient(red, yellow, lightgreen);
    }

  #grad {
        width: 200px;
        height: 150px;
        background-image: radial-gradient(circle, red, yellow, lightgreen);
    }

径向渐变：重复的径向渐变

  #grad {
        width: 200px;
        height: 150px;
        background-image: repeating-radial-gradient(circle, red 2%, yellow 10%, lightgreen 20%);
    }

三、文本效果

1. text-shadow：文本阴影

指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

  h3 {
        text-shadow: 8px 5px 5px #FF0000
    }
  <h3>Text-shadow 阴影效果!</h3>

2. box-shadow：盒子阴影

指定水平阴影，垂直阴影，模糊的距离，以及阴影的颜色

  div {
        width: 200px;
        height: 80px;
        background-color: yellow;
        box-shadow: 8px 5px 5px #888;
    }
  <div></div>

3. 实例：卡片效果

  div.card{
        width: 250px;
        height: 300px;
        text-align: center;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    }
    div.header{
        color: white;
        padding: 10px;
        font-size: 40px;
        background-color: #4CAF50;
    }
    div.container{
        padding: 10px;
    }
  <div class="card">
        <div class="header">
            <h1>1</h1>
        </div>
        <div class="container">
            <p>2022-5-20</p>
        </div>
    </div>

4. Text Overflow 属性

文本溢出属性指定应向用户如何显示溢出内容

ellipsis：溢出的内容以 ...省略

clip：溢出的内容直接隐藏

  div {
        white-space: nowrap; /*规定段落中的文本不进行换行*/
        width: 12em;
        overflow: hidden;
        border: 1px solid #000;
    }
    #demo1 {
        text-overflow: ellipsis;
    }
    #demo2 {
        text-overflow: clip;
    }
  <div id="demo1">This is some long text that will not fit in the box</div><br>
    <div id="demo2">This is some long text that will not fit in the box</div>

5. word-wrap: 换行

如果某个单词太长，不适合在一个区域内，它扩展到外面。

语法：word-wrap:break-word;

  p {
        width: 10em;
        word-wrap: break-word;
        border: 1px solid black;
    }
  <p>This paragraph contains a very long word</p>

不积跬步无以至千里不积小流无以成江海