How to set CSS border shadow?
grammar:
<style>
box-shadow: h-shadow v-shadow blur spread color inset;
</style>Value:
-
h-shadow: A value that must be set, defining the position of the horizontal shadow. Negative values are allowed.
-
v-shadow: A value that must be set to define the position of the vertical shadow. Negative values are allowed.
-
blur: Optionally set the value to define the blur distance.
-
spread: An optional setting value that defines the size of the shadow.
-
color : The value of an optional setting that defines the color of the shadow. If no value is set, the color value is based on the browser display, it is recommended to set it.
-
inset: optional set value,
example
X-axis and Y-axis are set to positive values (positive value X-axis right Y-axis down)
<style>
box-shadow:4px 4px 15px #f00;
</style>
One: Text shadow
1. Attribute: text-shadow
2. Attribute value: There are 4 commonly used attribute values
- the first attribute value indicates the horizontal direction
- the second attribute value indicates the vertical direction
- the third attribute value indicates the degree of blur
- The fourth attribute value represents the color
Two: box shadow
1. Attribute: box-shadow
2. Attribute value: There are 4 common attribute values
- the first attribute value indicates the horizontal direction
- the second attribute value indicates the vertical direction
- the third attribute value indicates the degree of blur
- The fourth attribute value represents the color
- The fifth attribute value represents inset, which stipulates that the box shadow is displayed inside
<!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{
text-shadow: 0 0 1px red;
}
p{
width: 100px;
height: 100px;
background: skyblue;
}
p{
box-shadow:0 0 2px #000;
}
</style>
</head>
<body>
<div>
文本内容
</div>
<p></p>
</body>
</html>
Use of border rounded corner attributes
1. Attribute: border-radius (radius)
2. Attribute value
- one attribute value: set the width and height to half/50%~100% to form a circle
- two attribute values: upper left corner, lower right corner, upper right corner, lower left corner Corner
- three attribute values: upper left corner, upper right corner, lower left corner, lower right corner
- four attribute values: upper left, upper right, lower right, lower left
- eight attribute values: upper left x upper right x lower right x lower left x/upper left y upper right y lower right y lower left the y
<!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: 300px;
height: 300px;
background: pink;
margin: 200px auto;
border-radius: 10px 10px 10px 10px/10px 10px 10px 10px
}
</style>
</head>
<body>
<div></div>
</body>
</html>
Background size setting
1. Attribute: background-size
2. Attribute value:
- The first type: set a fixed width and height of 100px 200px
- The second type: 100% 100% means that the percentage will be filled relative to the calculation of the parent element Parent box
- The third type: 100% auto
- The fourth type: cover coverage (it will not deform the picture but it will be cropped when the picture exceeds it)
- The fifth type: contain coverage (indicates that a certain side touches the parent level contains The box will stop changing, it will not be deformed or cropped)
<!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: 800px;
height: 400px;
border: 1px solid #000;
margin: 100px auto;
background: url(https://tse3-mm.cn.bing.net/th/id/OIP-C.7oOC6JBP9YBcN48LmPd1tQAAAA?pid=ImgDet&rs=1);
background-repeat: no-repeat;
background-size:contain
}
</style>
</head>
<body>
<div></div>
</body>
</html>