又续CSS3
这次主要讲呢
1.box-sizing属性
语法：box-sizing: content-box|border-box|inherit;
box-sizing属性的用法
box-sizing属性可以为三个值之一：
content-box（default），border-box，padding-box。
1.content-box，border和padding不计算入width之内
2.padding-box，padding计算入width内
3.border-box，border和padding计算入width之内
案例：
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>box-sizing</title>
<style type="text/css">
.content-box{
box-sizing:content-box;
-webkit-box-sizing:content-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: blue;
} .padding-box{
box-sizing:content-box;
-webkit-box-sizing:padding-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: red;
} .border-box{
box-sizing:content-box;
-webkit-box-sizing:border-box;
width: 100px;
height: 100px;
padding: 20px;
border: 5px solid #E6A43F;
background: pink;
} </style> </head> <body>
<div class="content-box"> </div> <div class="padding-box"> </div> <div class="border-box"> </div>
</body>
</html>
效果呢考虑到浏览器的兼容性，与我们想象的不一样
(兼容问题)可能会出现这样的效果
2.box-shadow（盒子阴影）
语法：box-shadow: h-shadow v-shadow blur spread color inset;
取值如下：
<length> <length> <length>? <length>? || <color>：
阴影水平偏移值（可取正负值）；阴影垂直偏移值（可取正负值）；阴影模糊值；阴影颜色
-moz-, -webkit-, -o-这些都是浏览器前缀。
常用前缀和浏览器的对应关系如下：
Firefox: -moz-
Chrome, Safari: -webkit-
Opera: -o-
IE: -ms-
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'box-shadow.jsp' starting page</title> <style type="text/css">
img{
height: 300px;
width: 500px;
-webkit-box-shadow:10px 5px 2px pink;
} </style> </head> <body>
<img src="2.jpg"></img>
</body>
</html>
效果(有帅哥哟)我们把阴影部分设为粉色萌萌哒
3.圆角属性值
语法：
border-radius: 1-4 length|% / 1-4length|%;
注释：按此顺序设置每个 radii 的四个值。如果省略 bottom-left，则与 top-right 相同。如果省略 bottom-right，则与 top-left 相同。如果省略 top-right，则与 top-left 相同
border-top-left-radius 左上角
border-top-right-radius 右上角
border-bottom-right-radius 右下角
border-bottom-left-radius 左下角
圆角案例：
椭圆
<%@ page language="java" import="java.util.*" pageEncoding="ISO-8859-1"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'border-radius.jsp' starting page</title> <style type="text/css">
/*椭圆*/
div{
width: 200px;
height: 100px;
border: 2px solid pink;
border-radius:100px/50px; /*水平半径,垂直半径*/
} </style> </head> <body>
<div> </div>
</body>
</html>
子弹头(我们只需设右上角和右下角的就行)
圆形(只需设一个值)
半月形
4. CSS3 2D变形
通过 CSS3 转换，我们能够对元素进行移动、缩放、转动、拉长或拉伸
2D转换的属性名为transform，使用方法为transform:method(value)
2D转换方法有translate、scale、rotate、skew、matrix，还有基于这些分支出的translateX、scaleY等
CSS3 2D转换详解
translate() 方法：（平移）
通过 translate() 方法，元素从其当前位置移动，根据给定的 left（x 坐标） 和 top（y 坐标） 位置参数。
rotate() 方法：（2D旋转）
rotate() 通过 rotate() 方法，元素顺时针旋转给定的角度。允许负值，元素将逆时针旋转。
scale() 方法：（缩放）
通过 scale() 方法，元素的尺寸会增加或减少，根据给定的宽度（X 轴）和高度（Y 轴）参数。
当参数x为负值时，元素内容会横向倒置；当参数y为负值时，元素内容会纵向倒置。
skew() 方法：（斜切扭曲）
通过 skew() 方法，元素翻转给定的角度，根据给定的水平线（X 轴）和垂直线（Y 轴）参数
matrix() 方法：（变换矩阵）
matrix() 方法把所有 2D 转换方法组合在一起。
matrix() 方法需要六个参数，包含数学函数，允许您：旋转、缩放、移动以及倾斜元素。
CSS3 2D转换案例
平移：
[alt]:hover{transform:translate(20px,20px);
旋转：
[alt]:hover{transform:rotate(90deg);
缩放：
[alt]:hover{transform:scale(1.4);
斜切扭曲：
[alt]:hover{transform:skew(45deg);
多个参数：
[alt]:hover{transform:scale(1.5) rotate(90deg);
5. css3过渡
通过 CSS3，我们可以在不使用 Flash 动画或 JavaScript 的情况下，当元素从一种样式变换为另一种样式时为元素添加效果
CSS3过渡属性
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'box.jsp' starting page</title>
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
--> <!-- 过渡 -->
<style type="text/css"> a{
-webkit-transition:padding 1s ease-out,backgrond-color 2s linear;
} a:hover{
padding-left: 20px;
background-color: pink;
} </style> </head> <body> <a href="#">哈哈哈</a><br/>
<a href="#">哈哈哈</a><br/>
<a href="#">哈哈哈</a><br/> </body>
</html>
6. css3动画
动画是使元素从一种样式逐渐变化为另一种样式的效果。
您可以改变任意多的样式任意多的次数。
请用百分比来规定变化发生的时间，或用关键词 "from" 和 "to"，等同于 0% 和 100%。
0% 是动画的开始，100% 是动画的完成。
为了得到最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。
css3动画属性
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>My JSP 'box.jsp' starting page</title> <style type="text/css"> div{
position:absolute;top:50%;
left:50%;overflow:hidden;
width:300px;height:150px;
margin:-75px 0 0 -150px;
border:3px solid #eee;
background:#e0e0e0;
} .one{
opacity:0;
display: block;
font-weight: bold;
height: 50px;
-webkit-animation:ersha 5s ease-out; } .two{
opacity:0;
display: block;
font-weight: bold;
height: 50px;
-webkit-animation:doubi 5s ease-out 5s; } @-webkit-keyframes ersha{ 0%{opacity:0; transform:translate(0px)}
10%{opacity:0.2; transform:translate(20px) }
20%{opacity:0.4; transform:translate(40px)}
100%{opacity:1; transform:translate(100px)}
} @-webkit-keyframes doubi{ 0%{opacity:0; transform:translate(0px)}
10%{opacity:0.2; transform:translate(20px) }
20%{opacity:0.4; transform:translate(40px)}
100%{opacity:1; transform:translate(100px)}
} </style> </head> <body> <div>
<span class="one">111我会动哟！！！</span>
<span class="two">222我会动哟！！！</span>
</div> </body>
</html>
如进度条一样
又续CSS3的更多相关文章
- CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- CSS3与页面布局学习总结
目录 一.BFC与IFC 1.1.BFC与IFC概要 1.2.如何产生BFC 1.3.BFC的作用与特点 二.定位 2.2.relative 2.3.absolute 2.4.fixed 2.5.z- ...
- CSS3与页面布局学习总结（三）——BFC、定位、浮动、垂直居中
一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格 ...
- python自动化开发-[第十三天]-前端Css续
今日概要: 1.伪类选择器 2.选择器优先级 3.vertical-align属性 4.backgroud属性 5.边框border属性 6.display属性 7.padding,margine(见 ...
- CSS3全览_最新布局
CSS3全览_最新布局 目录 CSS3全览_最新布局 1. 浮动及其形状 2. 定位 3. 弹性盒布局 4. 栅格布局 5. 表格布局 作者: https://www.cnblogs.com/xiax ...
- 纯CSS3实现的一些酷炫效果
之前在网上看到一些用纯CSS3实现的酷炫效果,以为实现起来比较困难,于是想看看具体是怎么实现的. 一.笑脸猫动画 实现效果如下: 这个实现起来确实比较麻烦,很多地方需要花时间,有耐心地调整. 1.先看 ...
- CSS3 border-radius边框圆角
在CSS3中提供了对边框进行圆角设定的支持,可对边框1~4个角进行圆角样式设置. 目录 1. 介绍 2. value值的格式和类型 3. border-radius 1~4个参数说明 4. 在线示例 ...
- CSS3 3D立方体效果－transform也不过如此
CSS3系列已经学习了一段时间了,第一篇文章写了一些css3的奇技淫巧,原文戳这里,还获得了较多网友的支持,在此谢过各位,你们的支持是我写文章最大的动力^_^. 那么这一篇文章呢,主要是通过一个3D立 ...
随机推荐
- 通过securecrt跳板机登录linux服务器
1 需要开运维平台开通用户对某台服务器的访问权限: 2 使用自己的账号密码登录(sso账号密码) 登录后,需要输入一个服务器分配给每个人唯一的密码:
- 如何让一个div居于页面正中间
如何让一个div居于页面正中间 如何让一个div居于页面中间,我今天说的是让一个div水平居中同时垂直居中,而不是简单的top:50%,left:50%.当然,我们就按一开始的思路写一下:top,le ...
- Python学习 day11
一.装饰器 装饰器是在不改变函数调用方式的情况下,需要在函数前后新增功能.有些类似aop,不知道原理是否相同,表现是一样的. 装饰器严格遵守了“开放封闭原则” 1.基本装饰器 def wrapper( ...
- vue与TypeScript集成配置最简教程
https://blog.csdn.net/u014633852/article/details/73706459 https://segmentfault.com/a/119000001187808 ...
- springboot实现服务器端消息推送（H5原生支持）
随着互联网的发展,传统的HTTP协议已经很难满足Web应用日益复杂的需求了.近年来,随着HTML5的诞生,WebSocket协议被提出,它实现了浏览器与服务器的全双工通信,扩展了浏览器与服务端的通信功 ...
- IO流（一）字节流
1:io流体系:对数据进行读写操作.所以IO不是读就是写咯. 2:io流的相关的类:java.io包. 有关IO的操作都会产生IOException异常 3:io:参照物是程序, i:input.进来 ...
- Java入门系列-14-深入类和对象
这篇文章用大量的代码帮你搞懂:值传递和引用传递.构造方法.方法重载.static关键字的使用 方法参数传递-值传递和引用传递 1.值传递 敲一敲: /** * 使用方法交换两个变量的值 * @auth ...
- [PY3]——求TopN/BtmN 和 排序问题的解决
需求 K长的序列,求TopN K长的序列,求BtmN 排序问题 解决 heap.nlargest().heap.nsmallest( ) sorted( )+切片 max( ).min( ) 总结和比 ...
- Magento 2开发教程 - 创建新模块
视频在youtube网站国内访问不了,可以使用FQ软件查看. 视频地址:www.youtube.com/embed/682p52tFcmY@autoplay=1 下面是视频文字介绍: Magento ...
- JavaScript对象中的this属性
this属性表示当前对象,如果在全局作用范围内使用this,则指代当前页面对象window: 如果在函数中使用this,则this指代什么是根据运行时此函数在什么对象上被调用. 我们还可以使用appl ...