一、CSS3用户界面：

在CSS3中，增加了一些新的用户界面特性来调整元素尺寸、框尺寸和外边框。CSS3用户界面属性：resize、box-sizing、outline-offset。

1、resize：

resize属性指定一个元素是否应该由用户去调整大小。

<style>

div

{

border:2px solid;

padding:10px 40px;

width:300px;

resize:both;

overflow:auto;

}

</style>

2、box-sizing：

box-sizing属性允许以确切的方式定义适应某个区域的具体内容。

<style>

#example1 {

  box-sizing: content-box;  

  width: 300px;

  height: 100px;

  padding: 30px;  

  border: 10px solid blue;

}

#example2 {

  box-sizing: border-box;

  width: 300px;

  height: 100px;

  padding: 30px;  

  border: 10px solid blue;

}

</style>

3、outline-offset：

outline-offset属性对轮廓进行偏移，并在超出边框边缘的位置绘制轮廓。轮廓与边框有两点不同：轮廓不占用空间；轮廓可能是非矩形。

<style>

div

{

margin:20px;

width:150px;

padding:10px;

height:70px;

border:2px solid black;

outline:2px solid red;

outline-offset:15px;

}

</style>

CSS3用户界面特性： 

二、CSS3图片：

1、圆角图片：

<style>

Img2 {

    border-radius: 8px;

}

Img1 {

    border-radius: 50%;

}

</style>

2、缩略图：

<style>

a {

    display: inline-block;

    border: 1px solid blue;

    border-radius: 4px;

    padding: 5px;

    transition: 0.3s;

}

a:hover {

    box-shadow: 0 0 2px 1px rgba(0, 140, 186, 0.5);

}

</style>

3、响应式图片：

响应式图片会自动适配各种尺寸的屏幕。图片放大的尺寸不大于其原始的最大值。

<style>

img {

    max-width: 100%;

    height: auto;

}

</style>

4、图片文本：

<style>

.container {

    position: relative;

}

.center {

    position: absolute;

    left: 0;

    top: 50%;

    width: 100%;

    text-align: center;

    font-size: 18px;

margin-top:-9px;

}

img {

    width: 100%;

    height: auto;

    opacity: 0.3;

}

</style>

5、卡片式图片：

<style>

body {margin:25px;}

div.polaroid {

  width: 80%;

  background-color: white;

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);

  margin-bottom: 25px;

}

div.container {

  text-align: center;

  padding: 10px 20px;

}

</style>

6、图片滤镜：

Css filter属性为元素添加可是效果（如模糊、饱和度）

<style>

img {

    width: 33%;

    height: auto;

    float: left;

    max-width: 235px;

}

.blur {-webkit-filter: blur(4px);filter: blur(4px);}

.brightness {-webkit-filter: brightness(250%);filter: brightness(250%);}

.contrast {-webkit-filter: contrast(180%);filter: contrast(180%);}

.grayscale {-webkit-filter: grayscale(100%);filter: grayscale(100%);}

.huerotate {-webkit-filter: hue-rotate(180deg);filter: hue-rotate(180deg);}

.invert {-webkit-filter: invert(100%);filter: invert(100%);}

.opacity {-webkit-filter: opacity(50%);filter: opacity(50%);}

.saturate {-webkit-filter: saturate(7); filter: saturate(7);}

.sepia {-webkit-filter: sepia(100%);filter: sepia(100%);}

.shadow {-webkit-filter: drop-shadow(8px 8px 10px green);filter: drop-shadow(8px 8px 10px green);}

</style>

7、响应式图片相册：

<style>

div.img {

    border: 1px solid #ccc;

}

div.img:hover {

    border: 1px solid #777;

}

div.img img {

    width: 100%;

    height: auto;

}

div.desc {

    padding: 15px;

    text-align: center;

}

* {

    box-sizing: border-box;

}

.responsive {

    padding: 0 6px;

    float: left;

    width: 24.99999%;

}

@media only screen and (max-width: 700px){

    .responsive {

        width: 49.99999%;

        margin: 6px 0;

    }

}

@media only screen and (max-width: 500px){

    .responsive {

        width: 100%;

    }

}

.clearfix:after {

    content: "";

    display: table;

    clear: both;

}

</style>

8、图片模态：

<style>

#myImg {

    border-radius: 5px;

    cursor: pointer;

    transition: 0.3s;

}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */

.modal {

    display: none; /* Hidden by default */

    position: fixed; /* Stay in place */

    z-index: 1; /* Sit on top */

    padding-top: 100px; /* Location of the box */

    left: 0;

    top: 0;

    width: 100%; /* Full width */

    height: 100%; /* Full height */

    overflow: auto; /* Enable scroll if needed */

    background-color: rgb(0,0,0); /* Fallback color */

    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */

}

/* Modal Content (image) */

.modal-content {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

}

/* Caption of Modal Image */

#caption {

    margin: auto;

    display: block;

    width: 80%;

    max-width: 700px;

    text-align: center;

    color: #ccc;

    padding: 10px 0;

    height: 150px;

}

/* Add Animation */

.modal-content, #caption {    

    -webkit-animation-name: zoom;

    -webkit-animation-duration: 0.6s;

    animation-name: zoom;

    animation-duration: 0.6s;

}

@-webkit-keyframes zoom {

    from {-webkit-transform: scale(0)}

    to {-webkit-transform: scale(1)}

}

@keyframes zoom {

    from {transform: scale(0.1)}

    to {transform: scale(1)}

}

/* The Close Button */

.close {

    position: absolute;

    top: 15px;

    right: 35px;

    color: #f1f1f1;

    font-size: 40px;

    font-weight: bold;

    transition: 0.3s;

}

.close:hover,

.close:focus {

    color: #bbb;

    text-decoration: none;

    cursor: pointer;

}

/* 100% Image Width on Smaller Screens */

@media only screen and (max-width: 700px){

    .modal-content {

        width: 100%;

    }

}

</style>

三、CSS3按钮：

1、按钮颜色：

<style>

.button {

    background-color: #4CAF50; /* 绿色 */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button2 {background-color: #008CBA;} /* 蓝色 */

.button3 {background-color: #f44336;} /* 红色 */

.button4 {background-color: #e7e7e7; color: black;} /* 灰色 */

.button5 {background-color: #555555;} /* 黑色 */

</style>

2、按钮大小：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {font-size: 10px;}

.button2 {font-size: 12px;}

.button3 {font-size: 16px;}

.button4 {font-size: 20px;}

.button5 {font-size: 24px;}

</style>

3、圆角按钮：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {border-radius: 2px;}

.button2 {border-radius: 4px;}

.button3 {border-radius: 8px;}

.button4 {border-radius: 12px;}

.button5 {border-radius: 50%;}

</style>

4、按钮边框颜色：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {

    background-color: white;

    color: black;

    border: 2px solid #4CAF50;

}

.button2 {

    background-color: white;

    color: black;

    border: 2px solid #008CBA;

}

.button3 {

    background-color: white;

    color: black;

    border: 2px solid #f44336;

}

.button4 {

    background-color: white;

    color: black;

    border: 2px solid #e7e7e7;

}

.button5 {

    background-color: white;

    color: black;

    border: 2px solid #555555;

}

</style>

5、鼠标悬停按钮：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 16px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    cursor: pointer;

}

.button1 {

    background-color: white;

    color: black;

    border: 2px solid #4CAF50;

}

.button1:hover {

    background-color: #4CAF50;

    color: white;

}

.button2 {

    background-color: white;

    color: black;

    border: 2px solid #008CBA;

}

.button2:hover {

    background-color: #008CBA;

    color: white;

}

.button3 {

    background-color: white;

    color: black;

    border: 2px solid #f44336;

}

.button3:hover {

    background-color: #f44336;

    color: white;

}

.button4 {

    background-color: white;

    color: black;

    border: 2px solid #e7e7e7;

}

.button4:hover {background-color: #e7e7e7;}

.button5 {

    background-color: white;

    color: black;

    border: 2px solid #555555;

}

.button5:hover {

    background-color: #555555;

    color: white;

}

</style>

6、按钮阴影：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

}

.button1 {

    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);

}

.button2:hover {

    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);

}

</style>

7、禁用按钮：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.disabled {

    opacity: 0.6;

    cursor: not-allowed;

}

</style>

8、按钮宽度：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    margin: 4px 2px;

    cursor: pointer;

}

.button1 {width: 250px;}

.button2 {width: 50%;}

.button3 {

    padding-left: 0;

    padding-right: 0;

    width: 100%;

}

</style>

9、按钮组：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: none;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    float: left;

}

.button:hover {

    background-color: #3e8e41;

}

</style>

10、带边框按钮组：

<style>

.button {

    background-color: #4CAF50; /* Green */

    border: 1px solid green;

    color: white;

    padding: 15px 32px;

    text-align: center;

    text-decoration: none;

    display: inline-block;

    font-size: 16px;

    cursor: pointer;

    float: left;

}

.button:hover {

    background-color: #3e8e41;

}

</style>

11、按钮动画：

<style>

.button {

  display: inline-block;

  border-radius: 4px;

  background-color: #f4511e;

  border: none;

  color: #FFFFFF;

  text-align: center;

  font-size: 28px;

  padding: 20px;

  width: 200px;

  transition: all 0.5s;

  cursor: pointer;

  margin: 5px;

}

.button span {

  cursor: pointer;

  display: inline-block;

  position: relative;

  transition: 0.5s;

}

.button span:after {

  content: '»';

  position: absolute;

  opacity: 0;

  top: 0;

  right: -20px;

  transition: 0.5s;

}

.button:hover span {

  padding-right: 25px;

}

.button:hover span:after {

  opacity: 1;

  right: 0;

}

</style>

波纹效果：

<style>

.button {

    position: relative;

    background-color: #4CAF50;

    border: none;

    font-size: 28px;

    color: #FFFFFF;

    padding: 20px;

    width: 200px;

    text-align: center;

    -webkit-transition-duration: 0.4s; /* Safari */

    transition-duration: 0.4s;

    text-decoration: none;

    overflow: hidden;

    cursor: pointer;

}

.button:after {

    content: "";

    background: #90EE90;

    display: block;

    position: absolute;

    padding-top: 300%;

    padding-left: 350%;

    margin-left: -20px!important;

    margin-top: -120%;

    opacity: 0;

    transition: all 0.8s

}

.button:active:after {

    padding: 0;

    margin: 0;

    opacity: 1;

    transition: 0s

}

</style>

按压效果：

<style>

.button {

  display: inline-block;

  padding: 15px 25px;

  font-size: 24px;

  cursor: pointer;

  text-align: center;   

  text-decoration: none;

  outline: none;

  color: #fff;

  background-color: #4CAF50;

  border: none;

  border-radius: 15px;

  box-shadow: 0 9px #999;

}

.button:hover {background-color: #3e8e41}

.button:active {

  background-color: #3e8e41;

  box-shadow: 0 5px #666;

  transform: translateY(4px);

}

</style>