A must-read for zero basics of HTML - getting started with HTML, programming is so simple
Chapter 8: Rounded corners, shadows, and transparency attributes
1. border-radius rounded border attribute
1.What is the rounded corner attribute?
The border-radius rounded corner attribute is equivalent to turning one or more corners of a box model into an arc (rounded corner) border, thus achieving the effect of rounded corners. The value of the attribute is equivalent to the radius of the border that becomes this arc.
2. How to determine the value of the rounded border attribute:
The value usually uses a percentage value or a pixel value.
- Pixel value method:
Four values : act on ( upper left|| upper right|| lower right|| lower left )
Three values : act on ( upper left|| upper right and lower left|| lower right )
Two values : act on ( upper left Lower right|| Upper right and lower left )
one value : the same value in the four corners
decomposition attribute value : such as upper left corner: border-top-left-radius
<head>
<title>圆角样式</title>
<link rel="stylesheet" href="rest.css">
<style>
div {
display: inline-block;
width: 200px;
height: 200px;
background: pink;
}
/* 圆角样式 设置一个半径为20像素的圆*/
/* border-radius: 20px; */
.div1 {
border-radius: 20px;
}
/* 四个值 圆角: 左上 右上 右下 左下*/
/* border-radius: 10px 20px 30px 40px; */
.div2 {
border-radius: 10px 20px 30px 40px;
}
/*三个值 第一: 左上 第二: 右上和左下 第三: 右下*/
.div3 {
border-radius: 30px 60px 50px;
}
/* 二个值 左上和右下 右上和左下*/
.div4 {
border-radius: 0px 100px;
}
/* 分解为 单个角的写法 左上角 右上角，右下角，左下角 */
.div5 {
/* 如：左上角 */
border-top-left-radius: 100px;
}
/* 百分比取值法： */
.div6 {
border-radius: 20%;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</body>
Rendering:
3. The box model changes to a circle or ellipse
- When the box model is square (width=height)
When the attribute value is half of the side length (1/2 width or 1/2 height), the box model becomes a circle. Even if it exceeds this value, it will still be a circle and will not change;
- When the box model is a rectangular shape
When the attribute value is half the length of the shorter side, the box model becomes an ellipse. Even if it exceeds this value, it will still be an ellipse and will not change;
- Note: There is a difference between the numerical unit px and the percentage % for a rectangle:
When using the value px, it means that the fillet is a border ellipse with this value as the radius. When the value exceeds half of the shorter side, the ellipse will no longer change; when using percentage, it
means that the fillet is based on the percentage corresponding to the width and height respectively. When the radius of the border ellipse exceeds 50%, the ellipse will no longer change;
<style>
div{
display: inline-block;
width: 300px;
height: 500px;
background: pink;
}
/* 这个盒子是一个长方形，所以设置圆角边框属性肯定是一个椭圆形状
当px像素值表示时，这个圆角（椭圆）的半径是较短边长的一半时，椭圆，达到临界值*/
.div1{
/* 刚好是较短边的一半，所以这个椭圆达到一个临界值，超过这个较短边的一半时，仍然还是这个椭圆临界点不会改变 */
border-radius: 150px;
}
.div2{
/* 这个是较长边的一半，但是它超过这个较短边的一半时，仍然还是这个椭圆临界点不会改变 */
border-radius: 250px;
}
.div3{
/* 而以百分比表示时，表示这个椭圆分别以宽和高的50%分别作为这个椭圆的长半径和宽半径 ，虽然50%也是一半的意思，但是它是同时结合了宽和高两个值，所以和直接写数值的一半椭圆形状不一样*/
border-radius: 50%;
/* 表示这个椭圆是以250半径和150半径的一个椭圆 ，相当于border-radius: 150px 250px;*/
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
</body>
Rendering:
<head>
<title>圆和椭圆</title>
<link rel="stylesheet" href="rest.css">
<style>
.one>div {
display: inline-block;
width: 200px;
height: 200px;
background: pink;
}
.two>div{
display: inline-block;
width: 200px;
height: 300px;
background: pink;
}
/* 给盒子变成一个圆或者椭圆 */
/* 1.盒子是正方形时：
圆角的半径设为边长的一半或者设为50% ，盒子变为一个圆*/
.div1 {
border-radius: 100px;
/* border-radius: 50%; */
}
.div2{
/* 注意：当给盒子设置圆角的半径超过边长的一半或者超过50% 时，它还是这个圆 */
/* border-radius: 150px; */
/* border-radius: 80%; */
/* border-radius: 100%; */
border-radius: 200%;
}
/* 2.盒子是长方形时：
（1）圆角的半径设为较短边长的一半时，盒子变为一个椭圆，达到临界值*/
.div3{
border-radius: 100px;
}
.div4{
/* 注意：当超过较短边长的一半时，它还是这个临界点的椭圆，不会改变 */
/* border-radius: 150px; */
border-radius: 200px;
}
/*（2） 圆角的半径设为50%时，盒子变为一个椭圆，椭圆达到另一个临界值 */
.div5{
border-radius: 50%;
}
.div6{
/* 注意：当超过圆角的半径设为50%时，它还是这个临界点的椭圆，不会改变 */
border-radius: 60%;
border-radius: 100%;
}
/* 长方形用数值单位px和百分比%的区别：
圆角边框用数值时，表示圆角是以这个数值为半径的边框椭圆，数值超过较短边一半时，椭圆将不再变化；
圆角边框用百分比时，表示圆角是分别以这个宽和高对应的百分比为半径的边框椭圆，超过50%时，椭圆将不再变化；
*/
</style>
</head>
<body>
<div class="one">
<div class="div1"></div>
<div class="div2"></div>
</div>
<div class="two">
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
<div class="div6"></div>
</div>
</body>
Rendering:
2. box-shadow shadow attribute
box-shadow box shadow creates a shadow effect around the box.
- At least two attribute values must be written (the first two are required):
box-shadow: 0px 0px 10px 5px teal inset;
The first value: the position of the horizontal shadow, negative values are allowed; required to be written
The second value: the position of the vertical shadow, negative values are allowed;
the third value that is required to be written: blur distance (default is 0), optional Select
The fourth value: the size of the shadow, optional
The fifth value: the color of the shadow, optional
The sixth value: Default outward diffusion (optional: inward diffusion inset), optional
<head>
<title>阴影</title>
<!-- 为了便于观看阴影就不用引入外部样式清除默认边距了 -->
<style>
.wrap{
width: 200px;
height: 400px;
background-color: pink;
/* 阴影属性 */
box-shadow: 0px 0px 10px 5px teal inset;
/*
第一个值: 阴影左右位置 (必须)
第二个值: 上下位置 (必须)
第三值: 模糊距离 (可写 默认是0 )
第四值: 模糊度扩散距离(阴影大小) (可写 默认是0)
第五值: 阴影颜色 (可选 默认是黑色)
第六值: 默认向外扩散 (可选: 向内扩散 inset)
*/
}
.text{
/* 文字阴影 也是一样必须写上前面两个值 */
text-shadow: 10px 10px 10px yellow;
/* text-shadow: 1px 1px 2px pink; */
}
</style>
</head>
<body>
<div class="wrap">
</div>
<p class="text">
我是文字 我的影子呢
</p>
</body>
Rendering:
3. Opacity element transparency attribute
Property value:
- The number ranges from 0 (completely transparent) to 1 (completely opaque)
- The value of the inherit Opacity attribute should be inherited from the parent element
<style>
.div1{
/* 不设置高度，高度由内容撑开 */
width: 300px;
background-color: pink;
opacity: 0.5;
margin-bottom: 50px;
}
.div2{
/* 设置高度，让部分内容溢出 */
width: 300px;
height: 50px;
background-color: pink;
opacity:0.7;
}
p{
background-color: rebeccapurple;
width: 100px;
margin: auto;
opacity: inherit;
}
/* opacity属性：设置元素的透明度，属性值：
数字取值 *0*（完全透明） ~ *1*（完全不透明）
inherit Opacity属性的值应该从父元素继承
*/
</style>
</head>
<body>
<div class="div1">
This element's opacity is 0.5! Note that both the text and
the background-color are affected by the opacity level!
</div>
<div class="div2">
This element's opacity is 0.5! Note that both the text and
the background-color are affected by the opacity level!
<p>我从父级继承opacity属性</p>
</div>
</body>
Rendering:
Summarize
The above is a relatively detailed explanation of some rounded corner attributes compiled by the editor for everyone, how to turn a box into a round box and an oval box, the shadow attribute of elements, and the transparent attribute of elements, etc., combined with related cases. It was compiled with reference to various sources and my own understanding. If there may be inaccuracies and omissions, I hope you guys can enlighten me and make corrections. I would like to thank you in advance.