css3盒子相关样式 布局相关样式 实现CSS3中的滤镜特效
2017-06-12 00:00
399 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
<style>
/*1.盒的类型
在css中，使用display属性来定义盒的类型。总体来说，css中的盒分为block类型与inline类型。例如，div元素与p元素属于block类型，
span元素与a元素属于inline类型
inline-block类型盒属于block类型盒的一种，但是在显示时具有inline类型盒的特点
使用inline-block类型来执行分列显示 使用inline-block类型来显示水平菜单
inline-table，因为table元素属于block类型，所以不能与其他文字处于不同的行中，但是如果将table元素修改成inline-table类型，
就可以让表格与其他文字处于同一行中了
list-item,如果在display属性中将元素的类型设定为list-item类型，可以将多个元素作为列表来显示，同时在元素的开头加上列表的标记
run-in类型与compact类型,将元素指定为run-in类型或compact类型时，如果元素后面还有block类型的元素，run-in类型的元素将被包含在后面的
block类型的元素内部，而compact类型的元素将被放置在block类型的元素左边
text-overflow属性，可以在盒的末尾显示一个代表省略的符号"..."但是text-overflow属性只在当盒中的内容在水平方向上超出盒的容纳范围时有效
*/
/*2.对盒使用阴影
box-shadow属性让盒在显示时产生阴影效果
box-shadow:length length length color前面3个length分别指阴影离开文字的横方向距离、阴影离开文字的纵向距离和阴影的模糊半径，color指阴影的颜色
创建盒内阴影 可以通过一个可选的inset关键字在盒元素内部创建阴影，该阴影只被创建在盒元素内部，超出元素边框的部分将被裁剪
可以单独对盒内的子元素使用阴影
可以使用first-letter选择器或first-line选择器来只让第一个文字或第一行具有阴影效果。
可以使用box-shadow属性让表格及表格内的单元格产生阴影效果
*/
/*指定针对元素的高度与宽度的计算方法
使用box-sizing属性的目的是对元素的总宽度做一个控制，如果不使用该属性，样式中默认使用的是content-box属性值，它只对内容的宽度做了一个指定，却没有
对元素的总宽度进行指定。
*/
/*div.inlineblock{*/
/*display: inline-block;*/
/*background-color: #00aaff;*/
/**/
/*}*/
/*div .inline{*/
/*display: inline;*/
/*background-color: #aaff00;*/
/**/
/*}*/
/*div#a,div#b{*/
/*!*display: inline-block;*!*/
/*!*width: 200px;*!*/
/*!*vertical-align: top;*!*/
/*display: list-item;*/
/*list-style-type: circle;*/
/*margin-left: 30px;*/
/*}*/
div:first-letter{
background-color: #ffaa00;
box-shadow:inset -10px -10px 10px gray;
width: 200px;
height: 100px;
}
/*div#a{*/
/*background-color: #0088ff;*/
/*}*/
/*div#b{*/
/*background-color: #00ccff;*/
/*}*/
/*div#c{*/
/*width: 400px;*/
/*background-color: #ffff00;*/
/*}*/
table{
border-spacing: 10px;
box-shadow: 5px 5px 20px gray;
}
td{
background-color: #ffaa00;
box-shadow: 5px 5px 5px gray;
padding: 10px;
}
</style>
</head>
<body>
<div>
<div id="a">A A A A A A A A A A A A A A A A A A A A A A A A A </div>
<div id="b">B B B B B B B B B B B B B B B B B B B B B B B B </div>
<div id="c">C C C C C C C C C C C C C C C C C C C C C C </div>
</div>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>0</td>
</tr>
</table>
</body>
</html>//布局相关样式
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
<style>
/*#left-sidebar{*/
/*float: left;*/
/*width: 200px;*/
/*padding: 20px;*/
/*background-color: orange;*/
/*}*/
/*#contents{*/
/*float: left;*/
/*width: 300px;*/
/*padding: 20px;*/
/*background-color: yellow;*/
/*}*/
/*#right-sidebar{*/
/*float: left;*/
/*width: 200px;*/
/*padding: 20px;*/
/*background-color: limegreen;*/
/*}*/
/*#left-sidebar,#right-sidebar,#contents{*/
/*box-sizing: border-box;*/
/*}*/
/*使用盒布局*/
/*flex使盒布局变为弹性盒布局 使用弹性盒布局的时候，可以通过order属性来改变各元素的显示顺序
可以使用flex-direction属性来指定多个元素的排列方向 row:横向排列 row-reverse:横向反向排列 column:纵向排列 column-reverse:纵向反向排列
使用盒布局的时候元素的宽度与高度具有自适应性
*/
/*flex-wrap样式属性来指定单行布局或多行布局，可指定样式属性值如下：nowrap:不换行 wrap:换行 wrap-reverse:虽然换行，但是换行方向
与使用wrap样式属性值时的换行方向相反
*/
/*calc方法，开发者可以通过使用该方法来自动计算元素的宽度、高度等数值类型的样式属性值 eg: width:calc(50%-100px)*/
#container{
/*display: -moz-box;*/
/*display: -webkit-box;*/
display: flex;
flex-direction: column;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
border: solid 5px blue;
height: 800px;
}
#left-sidebar{
/*order: 3;*/
/*width: 200px;*/
/*padding: 20px;*/
background-color: orange;
}
#contents{
/*order: 1;*/
/*flex: 1;*/
/*padding: 20px;*/
background-color: yellow;
}
#right-sidebar{
/*order: 2;*/
/*width: 200px;*/
/*padding: 20px;*/
background-color: limegreen;
}
#left-sidebar,#right-sidebar,#contents{
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing:border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左侧边栏</h2>
<ul>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="http://47.90.89.42:20009/card/card1.png" download="">超链接ddd</a></li>
</ul>
</div>
<div id="contents">
<h2>内容</h2>
<p>示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字
示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字示例文字</p>
</div>
<div id="right-sidebar">
<h2>右侧边栏</h2>
<ul>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
<li><a href="">超链接</a></li>
</ul>
</div>
</div>
<div></div>
</body>
</html>实现CSS3中的滤镜效果
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title> Insert title here</title>
<style>
div{
display: flex;
flex-direction: row;
}
figure{
width: 50%;
text-align: center;
}
figure:nth-child(2){
filter: grayscale(100%);/*将彩色图像转换为灰度图像*/
-webkit-filter:grayscale(100%) ;
filter: sepia(100%);/*该滤镜为彩色图片添加一层褐色色调*/
-webkit-filter: sepia(100%);
filter:saturate(250%);/*该滤镜用于增强彩色图像的饱和度*/
-webkit-filter: saturate(250%);
filter:hue-rotate(180deg);/*该滤镜是一个非常特殊的滤镜，可以用于产生特殊的视觉效果 样式属性中使用一个角度值为参数，参数值代表图像颜色环旋转的角度*/
-webkit-filter: hue-rotate(180deg);
filter: invert(100%);/*该滤镜将图像颜色翻转，样式属性使用一个百分比数值作为参数，用于定义图像颜色的翻转程度，
当参数值为100%时的作用相当于为一副照片进行反相处理*/
-webkit-filter: invert(100%);
filter:opacity(50%);/*该滤镜为图像产生透明或半透明效果*/
-webkit-filter: opacity(50%);
filter: contrast(200%);/*就像控制电视机上的亮度一样，该滤镜可以在全黑与原图像亮度之间调整图像的对比度*/
-webkit-filter: contrast(200%);
filter: blur(2px);/*该滤镜的作用类似于在图像上添加一层玻璃遮罩，使图像具有一种烟雾效果*/
-webkit-filter: blur(2px);
filter: drop-shadow(4px -4px 6px purple);/*该滤镜的作用是为图像添加一层阴影效果，就好像太阳照在图像上使其产生一个影子一样
样式属性中使用多个可选参数，分别用于指定阴影的横向方向偏移距离、纵方向偏移距离、阴影的模糊半径以及阴影的颜色*/
-webkit-filter: drop-shadow(4px -4px 6px purple);
}
</style>
</head>
<body>
<div>
<figure>
<img src="card1.png" alt="">
<figcaption>原始图片</figcaption>
</figure>
<figure>
<img src="card1.png" alt="">
<figcaption>使用灰度滤镜</figcaption>
</figure>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- CSS3布局样式相关：Columns、column-width、column-count、column-gap、column-rule、column-span、盒子模型、伸缩布局
- css3之布局相关的样式
- css盒子模型 css3盒子相关样式
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- css3-布局样式相关-慕课网学习
- CSS3盒子相关样式
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- CSS3布局相关样式学习
- css判断不同分辨率显示不同宽度布局实现自适应宽度&css3 @media样式的使用
- CSS3基础(2)—— 文字与字体相关样式、盒子类型、背景与边框相关样式、变形处理、动画功能
- 复习：css3核心属性——选择器、盒子模型、多列布局、响应式布局、动画特效
- CSS3布局相关样式
- CSS3的布局样式相关
- 【CSS3】布局样式相关--慕课网【学习总结】
- css3---布局相关的样式
- css3---文字以及字体的相关样式
- 【CSS3初探之盒相关样式】我们一人一个框。。。
- 基于css3实现漂亮便签样式
- CSS3实现超酷的图像动画变换特效
- IE滤镜实现透明度/阴影/渐变等特效