又续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>

如进度条一样

时间： 2024-10-24 15:20:27

又续CSS3的相关文章

CSS3有哪些新增的东西呢？？？（续2）

CSS3 动画 动画(animation)是css3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或者一组动画,常用来实现复杂的动画效果.相比较过渡,动画可以实现更多变化,更多控制,连续自动播放等效果. 一.动画的基本使用 1.定义动画 用keyframes 定义动画(类似定义类选择器) @keyframes 动画名称{ 0%{width:100px;} 100%{width:200px;} } 动画序列: 0% 是动画的开始,100%是动画的完成,这样的规则就是动画序列. 在@key

CSS3与页面布局学习总结（三）——BFC、定位、浮动、7种垂直居中方法

一.BFC与IFC 1.1.BFC与IFC概要 BFC(Block Formatting Context)即“块级格式化上下文”, IFC(Inline Formatting Context)即行内格式化上下文.常规流(也称标准流.普通流)是一个文档在被显示时最常见的布局形态.一个框在常规流中必须属于一个格式化上下文,你可以把BFC想象成一个大箱子,箱子外边的元素将不与箱子内的元素产生作用. BFC是W3C CSS 2.1 规范中的一个概念,它决定了元素如何对其内容进行定位,以及与其他元素的关系

css,css3盒子水平垂直居中

垂直居中在面试中经常见到的题目.总结几种,希望大家多多指教. ....<sytle> .box{ width:100px; height:100px; border;1px solid red; position:relative;   //父集相对定位 } .box1{ width:50px; height:50px; border:1px solid #000; } </style><body> <div class="box"> &

CSS3图片轮播效果

原文:CSS3图片轮播效果 在网页中用到图片轮播效果,单纯的隐藏.显示,那再简单不过了,要有动画效果,如果是自己写的话(不用jquery等),可能要费点时间.css3的出现,让动画变得不再是问题,而且简单易用.下面介绍我用css3与js写的一个图片轮播效果. 一般图片轮播就是三四张图片: <div class="wrap"> <div class="carousel"> <div><img src="http://

css3变形 过渡 动画

CSS3 变形/变换 相关属性 transform 设置或检索对象的检索(none 2D 3D) transform-origin:设置或检索对象以某个原点进行检索 transform-style: flat(默认)指定子元素位于次元素所在平面内/preserve-3d 指定子元素定位在三维空间内 perspective: 长度单位 指定观察者距离平面的距离 perspective-origin 指定观察者的位置 left/right/center backface-visibialbe: vi

html+css3实现长方体效果

网上大都是正方体的效果,由于做一个东西需要,写了一个HTML+css3实现的长方体,有需要的也可以看看.                   2017-07-25         21:30:23 html代码 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>html+css3实现长方体效果<

HTML5 CSS3 诱人的实例： 3D立方体旋转动画

转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/34120047 创意来自:http://www.html5tricks.com/demo/html5-3d-cube/index.html , 同学给我发的样例,感觉非常不错,只是实在想不出来实际的用处.可是效果非常炫~ 效果图: 知识点: 1.perspective ,transform 的复习 2.css3 backgroud实现格格背景.即面上的小格格 3. @-webki

CSS3略谈（中二）

一.3D转换:三维变换使用基于二维变换的相同属性,可以让我们基于三个坐标方向对元素进行变换.和二维变形一样,三维变形可以使用transform属性来设置 1. 3D移动 l   方法:translate3d(x,y,z) 使元素在这三个纬度中移动,也可以分开写,如:translateX(length),translateY(length), translateZ(length) l   示例: div:hover{ /*Y轴移动+100px*/ /*transform:translateY(10

CSS3的新特性 行内盒子before和after

CSS3的新特性 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>before after</title> 6 <style type="text/css"> 7 /*在DIV1盒子内部前面*/ 8 #div1:before{ 9 width: 100p