css3第一天（下）

CSS3

伪元素选择器

::
::before
::after
::first_letter 第一个字母
::first_line 第一行
::selection 选中的样式
向一个伪元素来写样式，content必须要有，content可以写入文本内容，通常给一个空，新创建的元素是一个行内元素，伪元素在c2里面用单冒号，c3用双冒号。高版本浏览器可以正常识别双冒号，假如遇到单冒号的伪元素，会自动转成双冒号，是为了做兼容处理

文本 文字阴影

//1左右偏移量2上下偏移量3模糊度，可以设置多重阴影
text-shadow:3px 3px 3px red,
3px 3px 3px blue;

边框圆角

width:100px;
height:100px;
background-color:yellow;
border-radius:10px;

边框阴影

box-shadow:2px 2px 2px red,
4px 4px 4px blue;

和文字阴影一样可以设置多个，逗号隔开，阴影不会改变盒子的大小，可以设置内阴影inset

边框图片

//border-image-source:url();
//border-image-slice:27 27 27 27;裁切
//border-image-repeat:stretch;平铺的效果（repeat,round,stretch）
//border-image-width:40px;//改变边框的宽度
border-width:20px;
border-image:url("") 27 repeat stretch;

通过边框背景图片可以实现自适应的边框样式

盒模型

• 
  
• 盒子模型是由content、padding、border这几部分构成
• 盒子大小content+padding+border
• css3有一个新的属性可以改变计算盒子大小的方式
• 根据box-sizing属性值可以分成两种计算方式
• box-sizing:border-box;
  

content = width