站長資訊網(wǎng)
之前的文章《手把手教你使用css3給文字添加陰影效果（代碼詳解）》中，給大家介紹了怎樣使用cs3給文字添加陰影效果。下面本篇文章給大家介紹怎樣使用css給文字添加邊框或字體放大效果，我們一起看看怎么做。
css給文字加添邊框或字體放大的方法
文字邊框
p{ border:2px solid blue;｝
文字邊框代碼示例
<meta charset="utf-8"> <title>文字邊框</title> <style> p{ border:2px solid blue;｝ </style> </head> <body> <p>中文網(wǎng)1</p> <p>中文網(wǎng)2</p> <p>中文網(wǎng)3</p> </body> </html>
代碼效果圖
字體放大
通過元素的名稱p選中所有的<p>元素
p{}
p指定樣式規(guī)則
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">php中文網(wǎng)</p> <p class="two">php中文網(wǎng)</p> <p class="three">php中文網(wǎng)</p> <p class="four">php中文網(wǎng)</p> </body> </html>
字體放大代碼效果圖
如果想讓所有的段落擁有灰色背景，使用元素選擇器<p>來定義
p{background:lightgray;} 選中所有的<p>設(shè)置背景色：亮灰色。
代碼示例
<!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中文網(wǎng)</p> <p class="two">php中文網(wǎng)</p> <p class="three">php中文網(wǎng)</p> <p class="four">php中文網(wǎng)</p> </body> </html>
代碼效果圖
推薦學(xué)習(xí)：CSS視頻教程
