css盒子圆角、阴影和背景

文章目录

• 前言
• 一、圆角
• 二、盒子阴影
• 三、使用图片创建边框
• 四、css背景图
• 总结

---

前言

---

一、圆角

分为四种类型

1.四个值：左上 右上 右下 左下 

2.  三个值：左上 右上和左下 右下  

3. 两个值 

4. 一个值

以椭圆为基础的圆角  x半径/y半径; 

          

<div class="div1"></div>
<style>

.div1 {
            width: 100px;
            height: 100px;
            border: 1px solid red;
            /*四个值：左上 右上 右下 左下 */
            /* border-radius: 10px 20px 30px 40px; */
            /*三个值：左上 右上和左下 右下  */
            /* border-radius: 10px 20px 40px; */
            /* 两个值 */
            /* border-radius: 20px 30px; */
            /* 以椭圆为基础的圆角， border-radius: x半径/y半斤; */
            border-radius: 30px/60px;
        }
  </style>

二、盒子阴影

 <style> 
.div2 {
            width: 200px;
            height: 200px;
            background-color: aqua;
            border-radius: 50%;
            box-shadow: 20px 20px 20px rgba(234, 8, 8, 0.322) inset, 10px 10px 5px rgba(195, 12, 12, 0.655);
        }
 </style>

<div class="div2"></div>

---

 

三、使用图片创建边框

<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>

<style>
.div3 {
            border: 15px solid transparent;
            width: 200px;
            height: 100px;
            border-image: url(../img/border.png) 30 30 repeat;
            /* 平铺 */
        }
        
        .div4 {
            border: 15px solid transparent;
            width: 200px;
            height: 100px;
            border-image: url(../img/border.png) 30 30 round;
            /* 铺满 */
        }
        
        .div5 {
            border: 15px solid transparent;
            width: 200px;
            height: 100px;
            border-image: url(../img/border.png) 30 30 stretch;
            /* 拉伸 */
        }
</style>

 

平铺

铺满

   拉伸

四、css背景图

<div class="div6">
        <p>崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉</p>
        <p>崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉</p>
    </div>
    <div class="div7">
        <p>崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉</p>
        <p>崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉崔翔轩爱吃肉</p>
    </div>

<style>
 .div6 {
            width: 400px;
            height: 300px;
            border: 1px solid red;
            background-image: url(../img/flower.gif), url(../img/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat;
        }
        
        .div7 {
            width: 500px;
            height: 200px;
            border: 20px solid rgba(255, 0, 0, 0.257);
            /* background-image: url(../img/flower.gif), url(../img/paper.gif);
            background-position: right bottom, left top;
            background-repeat: no-repeat, repeat; */
            /* cover contain 注意这两个值的区别 */
            /* background-size: contain; */
            float: left;
            padding: 40px;
            background-origin: content-box;
            background-color: aqua;
            background-clip: content-box;
        }
</style>