|
|
|
|
|
|
贊助商
分類目錄
贊助商
最新文章
搜索
CSS3實現(xiàn)段落第一個文字放大【實例演示/源碼下載】
作者:admin 時間:2022-3-15 10:38:14 瀏覽:本文將介紹如何使用CSS3實現(xiàn)段落第一個文字放大。
在放大文字的同時，還能為它添加一些樣式，把它的背景設為圓形、圓角、正方形等形狀，如圖：
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS第一個文字放大</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css">
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
body {
min-height: 100vh;
display: grid;
place-items: center;
font-family: "Nunito", system-ui, sans-serif;
font-size: 1.25rem;
line-height: 1.5;
padding: 1.5rem;
color: #3c3852;
}
p {
max-width: 36ch;
}
.dropcap {
float: left;
font-size: 26px;
line-height: 1;
padding: 0.5em;
margin-top: 0.15em;
margin-right: 0.3em;
background: #7257fa;
color: #fff;
border-radius: 1.5rem; /* 實心圓 */
/* border-radius: 0.375rem; */ /* 圓角 */
/* border-radius: 0rem; */ /* 正方形 */
font-weight: 700;
}
</style>
</head>
<body>
<p>
<span class="dropcap">卡</span>卡網旨在為廣大網站建設人員提供專業(yè)的網站測速和優(yōu)化服務，以及為廣大網民提供網絡速度測試服務，每天為超過1萬的網站提供測速服務，專業(yè)、專心、專注，為卡卡網贏得了良好的口碑和業(yè)界的肯定。
</p>
</body>
</html>
放大的文字使用了span標簽，該標簽的class值是dropcap。
dropcap通過修改border-radius的屬性值，可以得到各種不同形狀的圖形。
例如把border-radius的屬性值改為，0.375rem，就得到一個圓角圖形的背景。
把border-radius的屬性值改為，0rem，就得到一個正方形圖形的背景。
總結
本文介紹了一個簡單易用的CSS3實現(xiàn)段落第一個文字放大的效果，如果你也喜歡這個效果，那么下載本文實例稍作修改即可。
您可能對以下文章也感興趣
x
- 站長推薦
