3.border和background
Posted lanshanxiao
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了3.border和background相关的知识，希望对你有一定的参考价值。
# 3.border和background
- border-radius
border-radius:上左 上右 下右 下左
border-radius:上左下右 上右下左
border-radius:上左 上右下左 下右
border-top-left-radius:10px 10px;
border-top-right-radius:10px 10px;
border-bottom-right-radius:10px 10px;
border-bottom-left-radius:10px 10px;
特殊写法：
border-radius:10px 20px 30px 40px / 10px 20px 30px 40px;
前面对应水平，后面对应垂直
- box-shadow
给盒子加上阴影，分为inset内阴影和outset外阴影
box-shadow:inset 0px 0px 0px 0px #fff;
不写inset默认是outset
阴影的水平偏移量：正右负左
阴影的垂直偏移量：正下负上
阴影的模糊值：基于原来边框的位置，向两边同时模糊的距离
阴影的扩大:向四个方向同时扩大的距离
阴影的颜色
可以写多个：
box-shadow:inset 0px 0px 10px #fff,
3px 0px 10px #ff0,
0px -3px 10px #f0f,
-3px 0px 10px #0ff,
0px 3px 10px #00f;
练习：
```html
<div></div>
<style>
*{
margin:0;
padding:0;
}
body{
background-color:#000;
}
//第一种效果
div{
position:absolute;
left:calc(50% - 150px);
top:calc(50% - 150px);
width:300px;
height:300px;
border:1px solid #fff;
border-radius:50%;
box-shadow:inset 0px 0px 50px #fff,
inset 10px 0px 80px #f0f,
inset -10px 0px 80px #0ff,
inset 10px 0px 300px #f0f,
inset -10px 0px 300px #0ff,
0px 0px 50px #fff,
-10px 0px 80px #f0f,
10px 0px 80px #0ff;
}
//第二种效果
div{
position:absolute;
left:calc(50% - 150px);
top:calc(50% - 150px);
width:300px;
height:300px;
border:1px solid #fff;
border-radius:50%;
box-shadow:0px 0px 100px 50px #fff,
0px 0px 250px 125px #ff0;
}
//第三种效果
div{
position:absolute;
border-radius:5px;
left:calc(50% - 50px);
top:calc(50% - 50px);
width:100px;
height:100px;
background-color:#fff;
box-shadow: 0px 1px 2px rgba(0, 0, 0, .1);
transition:all .5s;
}
div::after{
content:"";
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border-radius:5px;
box-shadow:0px 5px 15px rgba(0, 0, 0, .3);
opacity:0;
transition:all .5s;
}
div:hover{
transform:scale(1.25, 1);
}
div:hover::after{
opacity:1;
}
</style>
```
- border-image
//引入背景图片
border-image-source:url();
//支持渐变色
border-image-source:linear-gradient(red, yellow);
border-image-slice:10 10 10 10;//只能填数字或百分比，顺序上右下左
border-image-width:
border-image-outset:
border-image-repeat:stretch | round | repeat | space;
速写
border-image:source slice repeat;
```html
<style>
//边框渐变色
div{
position:absolute;
left:calc(50% - 50px);
top:calc(50% - 50px);
width:100px;
height:100px;
border:10px solid black;
border-image-source:linear-gradient(red, yellow);
border-image-slice:10;
}
</style>
```
- background
background-image:url(), url();//可以放多张背景图片
background-size:100px 200px, 100px 200px;
background-repeat:no-repeat;
background-position:0 0, 100px 0;
//下面两个一起使用
background-origin:border-box | padding-box | content-box;//背景图片从哪里开始 边框盒 | 填充盒 | 内容盒
background-clip::border-box | padding-box | content-box | text;//背景图片从哪里结束 边框盒 | 填充盒 | 内容盒 | 文字体部分
//上面两个一起使用
```html
<style>
div{
position:absolute;
left:calc(50% - 200px);
top:100px;
height:100px;
line-height:100px;
font-size:80px;
width:400px;
background-image:url();
//下面两个属性配合使用，让背景图片填充到文字区域
-webkit-background-clip:text;
background-clip:text;
background-text-fill-color:transparent;
text-fill-color:transparent;
//上面两个属性配合使用
}
</style>
```
background-attachment:scroll | local | fixed
scroll相对于容器定位
local相对于容器内容定位
fixed相对于浏览器视口定位
```html
<style>
div{
width:500px;
height:700px;
border:1px solid red;
overflow:scroll;
background-image:url();
background-size:300px 400px;
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:local;
}
</style>
```
background-size: cover | contain
cover:等比例缩放，会超出容器
contain:被容器完整包含，等比例缩放，会留白
background-repeat:no-repeat;是否重复出现
background-image:linear-gradient(to right bottom, #0f0 20px, #ff0 60px, #00f 80px);
background-image:radial-gradient(circle at 100px 0, #0f0 20px, green 40px, #0ff);
以上是markdown格式的笔记
以上是关于3.border和background的主要内容，如果未能解决你的问题，请参考以下文章