盒子模型
原来的盒子，添加border,padding都可以让盒子本身变大，为了解决这个问题，css3推出了新的盒子模型 box-sizing:content-box,border-box content-box是默认值 计算方式 padding+border+width border-box 盒子大小始终是元素width 盒子阴影（边框阴影）： box-shadow:x y 模糊度（可选） 颜色 内阴影; box-shadow: 20px 20px 20px yellow,30px 30px 30px green;
盒子模型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
}
.box{
width: 100px;
height: 100px;
float: left;
border: 1px solid #ccc;
box-sizing: border-box;
}
.box:first-child{
background: green;
}
.box:nth-child(2){
background: yellow;
}
.box:nth-child(3){
background: blue;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.wrap{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
padding: 10px 20px;
border: 15px solid yellow;
}
.wrap1{
width: 100px;
height: 100px;
background: red;
margin: 100px auto;
padding: 10px 20px;
border: 15px solid yellow;
box-sizing: content-box;
}
</style>
</head>
<body>
<div class="wrap">
</div>
<div class="wrap1">
</div>
</body>
</html>
盒子阴影
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
width: 200px;
height: 300px;
background: #ccc;
margin: 100px auto;
box-shadow:10px 10px 10px red ;
}
</style>
</head>
<body>
<div></div>
</body>
</html>
字体
文字阴影
text-shadow：x y blur color, … 参数 x 横向偏移 y 纵向偏移 blur 模糊距离 color 阴影颜色 文本阴影如果加很多层，会很卡很卡很卡
例子：
层叠：color:red; font-size:100px; font-weight:bold; text-shadow:2px 2px 0px white, 4px 4px 0px red;
光晕：color:white; font-size:100px; text-shadow:0 0 10px #fff, 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #ff00de, 0 0 70px #ff00de, 0 0 80px #ff00de, 0 0 100px #ff00de, 0 0 150px #ff00de;
火焰文字：text-shadow: 0 0 20px #fefcc9, 10px -10px 30px #feec85, -20px -20px 40px #ffae34, 20px -40px 50px #ec760c, -20px -60px 60px #cd4606, 0 -80px 70px #973716, 10px -90px 80px #451b0e; font-family:Verdana, Geneva, sans-serif; font-size:100px; font-weight:bold; color:white;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-size: 100px;
text-align: center;
text-shadow: 2px 2px 2px red,4px 4px 4px yellow,8px 8px 8px blue;
}
</style>
</head>
<body>
<p>通天塔
</p>
</body>
</html>
文字描边
webkit-text-stroke:宽度 颜色
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
p{
font-size: 100px;
text-align: center;
-webkit-text-stroke:2px red;
unicode-bidi:bidi-override;
direction:rtl;
}
</style>
</head>
<body>
<p>通天塔
</p>
</body>
</html>
文字排列
direction 定义文字排列方式(全兼容) rtl从右向左排列 ltr 从左向右排列 注意要配合unicode-bidi:bidi-override; 一块使用
省略号
p{
white-space: nowrap
;
overflow: hidden
;
text-overflow: ellipsis
;
}
多行省略不兼容IE，要想兼容必须用插架或者滤镜写法（自行百度）
p{
display:-webkit-box
;
overflow:hidden
;
word-break:break-all
;
-webkit-box-orient:vertical
;
text-overflow:ellipsis
;
-webkit-line-clamp:20
;
}
自定义字体类型
@font-face {
font-family:'二哈';
src: url(fonts/Fontin_Sans_R_45b.otf);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div{
font-size: 200px;
text-align: center;
font-family: 'fon_t';
}
@font-face {
font-family:'fon_t';
src: url(fon/Fontin_Sans_I_45b.otf);
}
</style>
</head>
<body>
<div>asdfghjk
</div>
</body>
</html>
字体图标 icon
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
<style type="text/css">
.icon_t{
font-size: 200px;
text-align: center;
color: red;
}
.zanting{
font-size: 200px;
text-align: center;
color: red;
}
</style>
</head>
<body>
<p class="icon iconfont icon_t"></p>
<p class="icon iconfont icon-zanting zanting"></p>
</body>
</html>
