CSS3 ??? ??
CSS3?? ?? ??? ?? ??? ???? ????? ?? ???? ???? ??????. ????? ???? CSS3 ??? ??? ??? ????.
CSS3 ??? ??
?? >text-shadow
??? ???? ??
box-shadow ??? ?? ??? ???? ?????
?? -break ?? ? ?? ?? ??? ?????. text-shadow ????:
text-shadow:x-offset y-offset ?? ??;??:
x-offset: (?? ???)? ???? ?? ??? ??? ???? ??? px, em ?? ??? ?? ? ? ????. ?? ???? ???? ????? ?????, ?? ???? ???? ???? ??????.y-offset: (?? ???)? ???? ?? ??? ??? ?????. , ??? px, em ?? ??? ?? ? ? ????. ?? ???? ???? ????? ????, ?? ???? ???? ???? ?????.
blur: (?? ??)? ???? ?? ??? ???? ??? px???. em ?? ??? ?. ?? ?? ??? ? ????. ?? ??? ???? ? ????, ?? ???? ???? ? ??????. ?? ??? ?? ??? ???? ?? ?? ?? ?? 0?? ??? ? ????. color: (???? ??)? ???? ??? ?????.<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p{
text-align:center;
margin:0;
font-family: helvetica,arial,sans-serif;
color:#999;
font-size:80px;
font-weight:bold;
text-shadow:10px 10px #333;
}
</style>
</head>
<body>
<p>Text Shadow</p>
</body>
</html>box-shadow ??CSS3? CSS3 box-shadow ??? box Shadows? ?????<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 5px blue;
}
</style>
</head>
<body>
<div></div>
</body>
</html> ???? ?? ?? ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
div
{
width:300px;
height:100px;
background-color:red;
box-shadow: 10px 10px 15px grey;;
}
</style>
</head>
<body>
<div></div>
</body>
</html>?? ::before ? ::after ?? ??
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style>
#boxshadow {
position: relative;
-moz-box-shadow: 1px 2px 4px rgba(0, 0, 0,0.5);
-webkit-box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
box-shadow: 1px 2px 4px rgba(0, 0, 0, .5);
padding: 10px;
background: white;
}
/* Make the image fit the box */
#boxshadow img {
width: 90%;
border: 1px solid #8a4419;
border-style: inset;
}
#boxshadow::after {
content: '';
position: absolute;
z-index: -1; /* hide shadow behind image */
-webkit-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
width: 70%;
left: 15%; /* one half of the remaining 30% */
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="boxshadow">
<img src="https://img.php.cn/upload/course/000/000/008/5801821694a3b224.jpg" alt="Norway" width="300" height="200">
</div>
</body>
</html>text-overflow ??
< ??? ??? ??? ??? ?? ????. >text-overflow: ?? ??? ???? ????? ???? ?? ?? ??(...)? ???? ??<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
.test_demo_clip{text-overflow:clip; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
.test_demo_ellipsis{text-overflow:ellipsis; overflow:hidden; white-space:nowrap; width:200px; height:50px; background:#ccc;}
</style>
</head>
<body>
<div class="test_demo_clip">
不顯示省略標(biāo)記，而是簡單的裁切條
</div>
<br><br>
<div class="test_demo_ellipsis">
當(dāng)對象內(nèi)文本溢出時(shí)顯示省略標(biāo)記
</div>
</body>
</html>CSS3 ? ?? word-wrap
??? ?? ??? ?? ??? ??? ? ??? ??? ?????.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p.test
{
width:11em;
border:2px solid blue;
word-wrap:break-word;
}
</style>
</head>
<body>
<p class="test">
CSS3將完全向后兼容，所以沒有必要修改的設(shè)計(jì)來讓它們繼續(xù)運(yùn)作。
網(wǎng)絡(luò)瀏覽器也還將繼續(xù)支持CSS2。CSS3主要的影響是將可以使用新的可用的選擇器和屬性，
這些會(huì)允許實(shí)現(xiàn)新的設(shè)計(jì)效果（譬如動(dòng)態(tài)和漸變），而且可以很簡單的設(shè)計(jì)出現(xiàn)在的設(shè)計(jì)效果（比如說使用分欄）。
</p>
</body>
</html> CSS3 ?? ???
CSS3 ?? ?? ??? ??? ??? ?????:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>php中文網(wǎng)(php.cn)</title>
<style type="text/css">
p.test1
{
width:9em;
border:1px solid #000000;
word-break:keep-all;
}
p.test2
{
width:9em;
border:1px solid #000000;
word-break:break-all;
}
</style>
</head>
<body>
<p class="test1"> 為什么大羅如此讓球迷念念不忘？我們喜愛一個(gè)球星或一支球隊(duì)多少會(huì)有情愫寄托在內(nèi)。</p>
<p class="test2"> 為什么大羅如此讓球迷念念不忘？我們喜愛一個(gè)球星或一支球隊(duì)多少會(huì)有情愫寄托在內(nèi)。</p>
</body>
</html>
