前端笔记—从入门到坟墓[CSS3][CSS3新增样式][16]

@import方式引入CSS文件

在css文件内引入css文件可以使用@import方式，具体做法：

@import url('./style.css');

引入CSS的方法有两种，一种是@import，一种是link
1，@import url('地址');
2，<link href="地址" rel="stylesheet" type="text/css" />
现在绝大部分的网站都采用后一种link方式，原因在于@import先加载HTML，后加载CSS。link先加载CSS，后加载HTML。所以前者加载网页会出现令浏览者以外的格式，后者则是带格式的加载网页。原文链接

等距离分割布局

实现方法：
H5之前实现方案
css样式

section{
	width: 1000px;
	height: 200px;
    }
div{
	width: 33.3%;
	height: 100%;
	float: left;
}

html结构

<section>
    <div></div>
    <div></div>
    <div></div>
</section>

缺点：此方法在使用后，再为div标签添加margin属性时div会被挤下去，影响下面的布局。

浏览器截图：
在这里插入图片描述
CSS3实现方式
html结构使用上面相同结构，css样式如下，效果同上

section{
  display: flex;
}
section div{
  height:100%;
  flex: 1;
}

flex:1 代表把每个div1:1:1的设置宽度
注：当第一个div被设置宽度时，其他div均分剩下的区域

设置flex-direction:column设置垂直分布
html结构使用上面相同结构，css样式如下

section{
  width: 200px;
  height: 500px;
  background-color: #f0f0f0;
  display: flex;
  flex-direction: column;
}
section div{
  width: 100%;
  background-color: red;
  flex: 1;
}

注：flex-direction: column-reverse用于设置反转比例

浏览器截图：
在这里插入图片描述

css3文字阴影与背景阴影

文字阴影
text-shadow参数依次为：h-shadow(水平位置)，v-shadow(垂直位置)，blur(模糊距离)，color(阴影颜色) 四个。

兼容性：IE9及其以下版本不支持，主流浏览器都支持此属性。

p{
  color: #fff;
  text-shadow: 0px 0px 1px #000
}

浏览器截图：
在这里插入图片描述

背景阴影
box-shadow参数为：h-shadow(水平位置)，v-shadow(垂直位置)，blur(模糊距离)，spread(阴影尺寸)，color(颜色)，inset(是否设为内阴影) 六个。

div{
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  width:100px;
  height:100px;
  margin:auto;
}

浏览器截图：
在这里插入图片描述

CSS3背景渐变

div{
  width:300px;
  height: 20px;
  background: -webkit-linear-gradient(left top,red,green);
}

目前各个浏览器兼容性不好。（兼容到IE10）

CSS3opacity半透明

opacity设置半透明，兼容到IE9。
兼容更低IE版本写法：

opacity{
　　　opacity:0.5;
　　　filter:alpha(opacity=50);  //filter 过滤器   兼容IE678
}

CSS3border-image边框图片

普通用法：

border-image: url("img/borderImg.png") 179/10px round;

上面参数分别为：图片地址切割宽度/边框宽度平铺

切割宽度：是平均横切与纵切的宽度，一般为正方形图片的三分之一宽。
边框宽度：是在切割完后，切出的方格图片重新为其设置宽度
平铺：切割完后，将边角方格保留，其他方格平铺
注：最后一个值除round外还有：stretch（拉伸）repeat（从中间向外平铺）两个值。
具体如下

borderImg.png图片:
在这里插入图片描述

切隔横竖四刀，共九个方格，方格的宽为179px

例子：

#test{
	border: 10px solid #000000;
 	border-image: url("img/borderImg.png") 179/10px round;
}

<div id="test"></div>

浏览器截图：
在这里插入图片描述

更多案例：
类似推拉门的按钮
borderImg2.png:
在这里插入图片描述

#test2{
	border: 50px solid #000000;
	border-image: url("img/borderImg2.png") 96 165 154 83 fill round;
	/*分别按照96 165 154 83四个值进行切割*/
	/*fill:内容设置为平铺*/
	color: #fff;
}

<div id="test2">
	<p>你好,这是一个按钮</p>
</div>

浏览器截图：
在这里插入图片描述