css3新增属性

孙景荣

已于 2023-01-28 20:05:45 修改

阅读量180

点赞数 1

分类专栏： CSS 文章标签： css3 前端

于 2022-10-01 19:49:06 首次发布

本文链接：https://blog.csdn.net/ssjjrr/article/details/127129536

版权

CSS 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

一、阴影属性

1.文本阴影 text-shadow
属性值:常用的有四个属性值
第一个属性值: 水平方向
第二个属性值: 垂直方向
第三个属性值: 垂直模糊程度
第四个属性值: 字体颜色

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      div {
        text-shadow: 1px 1px 2px pink;
      }
    </style>
  </head>
  <body>
    <div>你好</div>
  </body>
</html>

在这里插入图片描述
2.盒子阴影 box-shadow
属性值:常用的有五个属性值
第一个属性值: 水平方向
第二个属性值: 垂直方向
第三个属性值: 垂直模糊程度
第四个属性值: 背景颜色
第五个属性值: 设置盒子阴影在内部显示 inset

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      p {
        width: 200px;
        height: 200px;
        background: skyblue;
        box-shadow: 10px 10px 2px pink;
      }
    </style>
  </head>
  <body>
    <p></p>
  </body>
</html>

在这里插入图片描述

二、背景属性 background-size

属性值：
100% 100% 宽高
100% 设置一个百分百的时候宽度是100% 高度默认为auto
cover 完整的覆盖住整个容器
contain 覆盖根据当前背景图的宽高决定
也可以设置成像素

三、多背景属性

background-image:图1,图2
background-repeat:no-repeat,no-repeat

四、边框圆角 border-radius

border-radius: 50%，四个圆角半径都为：宽高的一半

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
    <style>
      div {
        width: 500px;
        height: 500px;
        margin: 0 auto;
        background: skyblue;
        border-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div></div>
  </body>
</html>

在这里插入图片描述