How to add borders or font amplification effects to text in css (detailed code explanation)-CSS Tutorial-php.cn

How to add borders or font amplification effects to text in css (detailed code explanation)

奋力向前

Release： 2021-08-06 10:11:33

Original

5487 people have browsed it

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 font amplification effects to text in css (detailed code explanation)

How to add borders or enlarge fonts to text using css

Text borders

p{ border:2px solid blue;｝

Copy after login

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>

Copy after login

Code rendering

Font enlargement

Select all elements by element name p

p{}

Copy after login

pSpecify style rules

p {font-size:200%;} 将字体放大1倍

Copy after login

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>

Copy after login

Font amplification code rendering

If you want all paragraphs to have a gray background , use the element selector to define

p{background:lightgray;} 选中所有的<p>设置背景色：亮灰色。

Copy after login

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>

Copy after login

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!