您的位置：首页 > Web前端 > CSS

CSS3笔记1 — 文字阴影、边框阴影、自动换行

2017-03-11 17:12 357 查看

1. 文字阴影



CSS:

<style>
h1 {
text-shadow: 15px 15px 1px #ccc;
}
</style>


html:

<body>
<h1>文字阴影</h1>
</body>


解析：

text-shadow : x y r color;

x: 阴影离开文字的横向距离。

y : 阴影离开文字的纵向距离.

r : 阴影模糊半径。

color : 阴影颜色。

2.边框阴影



.box {
width: 100px;
height: 100px;
background-color: #000;
box-shadow: 10px 20px 10px 5px #ccc;
}


解析：

box-shadow: 10px 20px 10px 5px red;

分别是：X轴左右偏移量、Y轴上下偏移量、阴影羽化大小（值越大越模糊）、阴影大小、阴影颜色、默认是外阴影也可以改为内阴影inset；

普通外阴影：
box-shadow: 10px 20px 10px 5px red;


内阴影：
box-shadow: 10px 20px 10px 5px red inset;


3.自动换行

html:

<body>
<p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁，为了推动Web标准化运动的发展，一些公司联合起来，成立了一个叫做 Web Hypertext Application Technology Working Group （Web超文本应用技术工作组 -WHATWG） 的组织。WHATWG 致力于 Web 表单和应用程序，而W3C（World Wide Web Consortium，万维网联盟） 专注于XHTML2.0。在 2006 年，双方决定进行合作，来创建一个新版本的 HTML。</p>
</body>


CSS:

<style>
p {
word-break: break-all;
}
</style>


内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css3
相关文章推荐
新的分享
章节导航