written in front
Hello everyone, I am [ Lin-Xiaobai ], a student majoring in software engineering , who likes computer knowledge . I hope everyone can learn and progress together ! I am a college student , and my professional level is limited. If you find any mistakes or deficiencies , please correct me! thank you all! ! !
If brothers and sisters are interested in my articles, please don't be stingy with your little hands, give more likes and follow ! ❤❤❤ Love you guys! ! !
Table of contents
1.2 Outline of the border (understand)
【Past review】
[CSS3 Series] Chapter 2 CSS3 Adds Box Model and Background Attributes
[CSS3 Series] Chapter 1 Three new basic properties of CSS3
【other series】
1. CSS3 new border property
1.1 Border rounded corners
- In CSS3 , a box can be rounded using the border - radius property.
- Round the four corners at the same time:
border-radius:10px;
- Set the rounding of each corner separately (almost never used):
- Set the fillet of each corner separately, comprehensive writing (almost no use):
border-raidus: 左上角x 右上角x 右下角x 左下角x / 左上y 右上y 右下y 左下yCode demo:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_边框圆角</title> <style> div { width: 400px; height: 400px; border: 2px solid black; margin: 0 auto; border-radius: 100px; /* border-radius: 50%; */ /* border-top-left-radius: 100px; */ /* border-top-right-radius: 50px; */ /* border-bottom-right-radius: 20px; */ /* border-bottom-left-radius: 10px; */ /* border-top-left-radius: 100px 50px; */ /* border-top-right-radius: 50px 20px; */ /* border-bottom-right-radius: 20px 10px; */ /* border-bottom-left-radius: 10px 5px; */ /* border-radius:100px 50px 20px 10px / 50px 20px 10px 5px; */ } </style> </head> <body> <div></div> </body> </html>
1.2 Outline of the border (understand)
- outline - width : the width of the outer outline.
- outline - color : the color of the outer outline.
- outline - style : the style of the outline.
- none : no outline
- dotted : dotted outline
- dashed : dashed outline
- solid : solid outline
- double : double line outline
- outline - offset sets the distance between the outer outline and the border, both positive and negative values can be set.
- Note: outline - offset is not a sub-property of outline , but an independent property.
- outline composite attribute:
outline:50px solid blue;Code demo:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_边框外轮廓</title> <style> .box1 { width: 400px; height: 400px; padding: 10px; border: 10px solid black; background-color: gray; font-size: 40px; margin: 0 auto; margin-top: 100px; /* outline-width: 20px; */ /* outline-color: orange; */ /* outline-style: solid; */ outline-offset: 30px; outline:20px solid orange; } </style> </head> <body> <div class="box1">你好啊</div> <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Nobis, architecto.</div> </body> </html>
2. CSS3 new text property
2.1 Text Shadow
- In CSS3 , we can use the text - shadow property to add shadow to the text.
- grammar:
text-shadow: h-shadow v-shadow blur color;
- Default: text - shadow:none means no shadow.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>01_文本阴影</title> <style> body { background-color: black; } h1 { font-size: 80px; text-align: center; color: white; /* text-shadow: 3px 3px; */ /* text-shadow: 3px 3px red; */ /* text-shadow: 3px 3px 10px red; */ /* text-shadow: 0px 0px 15px black; */ text-shadow: 5px 5px 20px red; font-family: '翩翩体-简'; } </style> </head> <body> <h1>欢迎学习前端</h1> </body> </html>
2.2 Text wrapping
- In CSS3 , we can use the white - space property to set the text wrapping method.
- Common values are as follows:
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>02_文本换行</title> <style> div { width: 400px; height: 400px; border: 1px solid black; font-size: 20px; white-space: nowrap; /* white-space: pre-wrap; */ /* white-space: pre-line; */ /* white-space: pre; */ } </style> </head> <body> <div> 山回路转不见君 雪上空留马行处 山回路转不见君 山回路转不见君山回路转不见君山回路转不见君山回路转不见君 雪上空留马行处 山回路转不见君 雪上空留马行处 山回路转不见君 雪上空留马行处 山回路转不见君 雪上空留马行处 山回路转不见君 雪上空留马行处 </div> </body> </html>
2.3 Text overflow
- In CSS3 , we can use the text - overflow property to set the rendering mode when the text content overflows.
- Common values are as follows:
- Note: For the text - overflow property to take effect, the block container must explicitly define overflow as a non- visible value and white - space as a nowrap value.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>03_文本溢出</title> <style> ul { width: 400px; height: 400px; border: 1px solid black; font-size: 20px; list-style: none; padding-left: 0; padding: 10px; } li { margin-bottom: 10px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } </style> </head> <body> <ul> <li>焦点访谈：隐形冠军 匠心打造 分毫必争</li> <li>我，嫁到日本才发现，女性活得真憋屈，体毛不能有，放屁也不自由</li> <li>高洪波无缘！足协盟主热门人选曝光，3选1，冷门人物或成黑马杀出</li> <li>《狂飙》爆火以后“疯驴子”被骂上热搜：跪着赚钱丢人吗</li> <li>气温猛降15℃，冷空气再来袭！这些地方迎大范围降雨！“虚高”气温大跳水！！！！！</li> </ul> </body> </html>
2.4 Text decoration
- CSS3 upgrades the text - decoration property, making it a composite property.
text-decoration: text-decoration-line || text-decoration-style || text-decorationcolorSubproperties and their meanings:
- text - decoration -line : Set the position of the text decoration line
- none : specifies no decoration for the text (the default)
- underline : the decoration of the specified text is underlined
- overline : The decoration of the specified text is an overline
- line - through : specifies that the decoration of the text is a through line
- text - decoration-style : the shape of the text decoration
- solid : solid line (default)
- double : double line
- dotted : dotted lines
- dashed : dashed line
- wavy : wavy line
- text - decoration -color : the color of the text decoration line
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>04_文本修饰</title> <style> h1 { font-size: 100px; /* text-decoration-line: overline; */ /* text-decoration-style: dashed; */ /* text-decoration-color: blue; */ text-decoration: overline wavy blue; } </style> </head> <body> <h1>你好啊，欢迎学习前端</h1> </body> </html>
2.5 Text Stroke
- Note: The text stroke function is only supported by webkit kernel browsers.
- - webkit - text - stroke - width : Set the width of the text stroke and write the length value.
- - webkit - text - stroke - color : Set the color of the text stroke and write the color value.
- - webkit - text - stroke : Composite attribute, set text stroke width and color.
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>05_文本描边</title> <style> h1 { font-size: 100px; /* -webkit-text-stroke-color:red; */ /* -webkit-text-stroke-width:3px; */ /* -webkit-text-stroke-width:3px; */ -webkit-text-stroke:3px red; color: transparent; } </style> </head> <body> <h1>欢迎学习前端</h1> </body> </html>
epilogue
I will continue to update the article! I hope everyone will click three times , your encouragement is the motivation for the author to keep updating
