Home >Web Front-end >CSS Tutorial >How to add borders or font amplification effects to text in css (detailed code explanation)
How to add borders or font amplification effects to text in css (detailed code explanation)
- 奋力向前Original
- 2021-08-05 16:33:185520browse
In the previous article "Teach you step by step how to use css3 to add shadow effects to text (detailed code explanation)", I introduced you how to use cs3 to add shadow effects to text. The following article will introduce to you how to use CSS to add borders or font amplification effects to text. Let’s see how to do it together.
How to add borders or enlarge fonts to text using css
Text borders
p{ border:2px solid blue;｝Text border code example
<meta charset="utf-8">
<title>文字边框</title>
<style>
p{ border:2px solid blue;｝
</style>
</head>
<body>
<p>中文网1</p>
<p>中文网2</p>
<p>中文网3</p>
</body>
</html>Code rendering
Font enlargement
Select all <p></p>elements by element name p
p{}pSpecify style rules
p {font-size:200%;} 将字体放大1倍Font amplification code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字边框</title>
<style>
p{font-size: 200%;}
p.one
{
border-style:dashed;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
p.four
{border-style:dashed;
border-width:2px;
border-color:red
</style>
</head>
<body>
<p class="one">php中文网</p>
<p class="two">php中文网</p>
<p class="three">php中文网</p>
<p class="four">php中文网</p>
</body>
</html>Font amplification code rendering
If you want all paragraphs to have a gray background , use the element selector<p></p> to define
p{background:lightgray;} 选中所有的<p>设置背景色：亮灰色。Code example
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文字边框</title>
<style>
p{background:lightgray; font-size: 200%;}
p.one
{
border-style:dashed;
border-width:5px;
}
p.two
{
border-style:solid;
border-width:medium;
}
p.three
{
border-style:solid;
border-width:1px;
}
p.four
{border-style:dashed;
border-width:2px;
border-color:red
</style>
</head>
<body>
<p class="one">php中文网</p>
<p class="two">php中文网</p>
<p class="three">php中文网</p>
<p class="four">php中文网</p>
</body>
</html>Code rendering
Recommended learning: CSS video tutorial
The above is the detailed content of How to add borders or font amplification effects to text in css (detailed code explanation). For more information, please follow other related articles on the PHP Chinese website!