CSS Day9-CSS新样式

发布时间:2024年01月17日
9.1 背景相关属性
  • 背景图片 background-image

    url引入图片地址

    展示特点:由上到下,由左到右依次排列

  • 背景图大小 background-size

    background-size:宽 高;(相比这个最优)

    background-size:cover; 图片展示不全

    background-size:contain; 图片平铺

  • 背景平铺 background-repeat

    background-repeat:repeat-x; 水平方向平铺

    background-repeat:repeat-y; 垂直方向平铺

    background-repeat:no-repeat;不平铺(常用

    --------------------------------------以下为不常用---------------------------------

  • 背景图像相对位置 background-origin

    background-origin:padding-box; 从padding开始处的相对位置

  • 设置背景图像的起始位置 background-position

    background-position:center;

  • 背景图剪切 background-clip

    content-box 背景绘制在内容方框内(剪切成内容方框)

  • 背景图复合属性

    background:url color image position/size repeat origin clip;

9.2 边框相关属性
  • 外轮廓 outline(了解)

  • 外边框圆角 border-radius

    <!DOCTYPE html>
    <html lang="en">
    <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <style>
     ? ? .box1{
     ? ? ? ? width: 200px;
     ? ? ? ? height: 300px;
     ? ? ? ? border: 2px solid rgb(148, 208, 59);
     ? ? ? ? border-radius: 20px;
     ? ? ? ? /* border-radius: 10%; */
     ? ? }
     </style>
    </head>
    <body>
     <div class="box1"></div>
    </body>
    </html>
  • 盒子阴影 box-shaow

    四个值时 box-shaow:水平方向(正值向右) 垂直方向(正值向下) 模糊值 阴影颜色(默认黑色);

    五个值时 box-shaow:水平方向 垂直方向 模糊值 外延值 阴影颜色(默认黑色);

    六个值时 box-shaow:水平方向 垂直方向 模糊值 外延值 阴影颜色(默认黑色) 内延值;

  • resize 调整盒子的大小(了解)

9.3 渐变
  • 径性渐变 radial-gradient

    1. 调整为圆形 background-image: radial-gradient(red, yellow, green);

    2. 圆心从左上角向四周扩散 background-image: radial-gradient(at left top, red, yellow, green);

    3. background-image: radial-gradient(at 水平(50px) 垂直(100px), red, yellow, green);

    4. 调整为正圆 background-image: radial-gradient(100px,100px, red, yellow, green);

    5. 第一个值代表x轴的半径,第二个值代表y轴的半径 background-image: radial-gradient(red 50px, yellow 100px, green 50px);

  • 线性渐变 linear-gradient

    1. 默认从上到下渐变 background-image: linear-gradient(red, yellow, green);

    2. 通过to 方位词进行线性渐变 background-image: linear-gradient(to bottom left, red, yellow, green);

文章来源:https://blog.csdn.net/2301_76534754/article/details/135640233
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。