css如何给文本加上外框或字体变大实际效果(编码详细说明)-开发网

其他回答《手把手教你使用css3给文字添加阴影效果（代码详解）》中，给大家介绍了如何使用cs3给内容加上阴影效果。下边本文为大家介绍如何使用css给内容加上外框或字体变大实际效果，我们一起看看如何做。

css如何给文本加上外框或字体变大实际效果(编码详细说明)

css给文本加添外框或字体变大的办法

文字边框

p{ border:2px solid blue;｝

文字边框编码实例

<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>

编码设计效果图

css如何给文本加上外框或字体变大实际效果(编码详细说明)

字体变大

根据元素名字p选定每一个<p>原素

p{}

p特定款式标准

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

字体变大编码实例

<!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">AdminJS</p>
<p class="two">AdminJS</p>
<p class="three">AdminJS</p>
<p class="four">AdminJS</p>
</body>

</html>

字体变大编码设计效果图

css如何给文本加上外框或字体变大实际效果(编码详细说明)

如果要让每一个文章段落有着灰色背景，应用原素选择符<p>来定义

p{background:lightgray;} 选定每一个<p>设定背景颜色：亮灰色。

编码实例

<!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">AdminJS</p>
<p class="two">AdminJS</p>
<p class="three">AdminJS</p>
<p class="four">AdminJS</p>
</body>

</html>

编码设计效果图

css如何给文本加上外框或字体变大实际效果(编码详细说明)