日度归档:2020年2月9日

CSS3 box-shadow属性简介说明


摘要:
下文讲述css3中box-shadow属性功能简介说明,如下所示:


css3 box-shadow 功能简介

box-shadow功能:为指定元素添加一个或多个阴影效果。
———————————–
box-shadow 语法:

   box-shadow: h-shadow v-shadow blur spread color inset;
    

参数说明:

属性值

备注说明
h-shadow

必填项,水平阴影的位置,允许负值
v-shadow

必填项,垂直阴影的位置,允许负值
blur

可选,模糊距离
spread

可选,阴影的大小
color

可选,阴影的颜色
inset

可选,从外层的阴影(开始时)改变阴影内侧阴影


css3 box-shadow 举例说明

  
  <!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8"> 
  <title>猫猫教程(www.maomao365.com)--box-shadow举例应用</title>
 </head>
 <style>
   
   div.divTest1{
            width: 100px;
            height: 100px;
            box-shadow:4px 2px 6px blue;
        }

  div.divTest2{
            width: 100px;
            height: 100px;
            box-shadow:4px 2px 6px blue inset;
        }

 </style>

 <body>
   
	<div class='divTest1'>
	 外边框阴影
	</div>
 
    <br />
    
    <div class='divTest2'>
	 内边框阴影
	</div>

 </body>
</html>
css box_shadow属性举例应用

css box_shadow属性举例应用

CSS3 如何实现为元素设置多个背景图片呢?


摘要:
下文讲述css3中为元素设置多个背景图片的方法分享,如下所示:

例:
设置多个背景图片,可以采用下面的方法

 /*
  例:
    为元素ID等于divTest 
	设置背景图片为A.png,B.png,C.png
	并设置背景图片的相应位置
 */
 #divTest{ 
  background-image: url(A.png),url(B.png),url(C.png);
  background-position:50px -80px,40px 70px,0px 0px;
  background-repeat: no-repeat, no-repeat, repeat-x;
} 

CSS3 如何实现元素的3D旋转效果呢?


摘要:
下文讲述使用css3的相关属性实现元素3D旋转的方法分享,如下所示:

下文将通过举例的方式讲述:
当鼠标放在“DIV”对象上时,采用3D旋转的方式切换到另一个DIV上的方法分享,如下所示:

实现思路:
使用 CSS3 @keyframes 设置样式变化
使用 CSS3 transform属性 设置旋转角度
使用 CSS3 perspective属性 设置观察视角

   <!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.maomao365.com/" />
<title>猫猫教程(www.maomao365.com)--鼠标指向则旋转</title>
<style type="text/css">
body, div, ul, li{
  padding:0;
  margin:0;
}
.container ul li{
  height:180px;
  width:180px;
  margin-right:20px;
  margin-bottom:20px;
  display:inline;
  -webkit-perspective:1000px;
  -moz-perspective:1000px;
  float:left;
}
.all_box{
  position:relative;
  height:180px;
  width:180px;
  -webkit-transform-style:preserve-3d;
  -moz-transform-style:preserve-3d;
  -ms-transform-style:preserve-3d;
  transform-style:preserve-3d;
  -webkit-transition:0.5s;
  -moz-transition:0.5s;
  -o-transition:0.5s;
  -ms-transition:0.5s;
  transition:0.5s;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
}
.all_box div{
  display:block;
  height:180px;
  width:180px;
  position:absolute;
  left:0;
  top:0;
  background:#060;
  text-align:center;
  -webkit-backface-visibility:hidden;
  -moz-backface-visibility:hidden;
  backface-visibility:hidden;
  color:#FFF;
  line-height:180px;
  font-size:16px;
}
.all_box .f_box {
z-index: 2;
}
.all_box .b_box {
z-index: 1;
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.container ul li:hover .all_box{
  -webkit-transform:rotateY(180deg);
  -moz-transform:rotateY(180deg);
  transform:rotateY(180deg);
}
.container ul li:hover .b_box{
  z-index:3;
}
</style>
</head>
<body>
<div class="container">
  <ul>
    <li>
      <div class="all_box">
        <div class="f_box">猫猫教程--1</div>
        <div class="b_box">猫猫教程--2</div>
      </div>
    </li> 

  </ul>
</div>
</body>
</html> 
 
css div旋转举例

css div旋转举例