2016.11.22css实现几个效果
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2016.11.22css实现几个效果相关的知识，希望对你有一定的参考价值。
1、阴影box-shadow
语法：box-shadow: h-shadow v-shadow blur spread color inset;
h-shadow必需。水平阴影的位置。允许负值。
blur可选。模糊距离。但其值只能是为正值，如果其值为0时，表示阴影不具有模糊效果，其值越大阴影的边缘就越模糊；
color可选。阴影的颜色。请参阅 CSS 颜色值。如不设定颜色，浏览器会取默认色，但各浏览器默认取色不一致，建议不要省略此参数。
inset可选。将外部阴影 (outset) 改为内部阴影。
<style type="text/css"> div{ width:100px; height:100px; border:1px solid red; /* box-shadow 设置边框阴影 取值：接受6个参数 box-shadow:阴影类型 水平偏移 垂直偏移 模糊程度 阴影大小 阴影颜色 阴影类型取值：默认是外阴影，inset表示内阴影 */ box-shadow:1px 1px 1px 1px gray; }
2、绝对定位
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
| absolute |
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
CSS :hover 伪类
:hover 伪类在鼠标移到元素上时向此元素添加特殊的样式。
这个伪类应用处于“悬停状态”的元素。悬停定义为用户指示了一个元素但没有将其激活。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn"> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> <title>网页标题</title> <meta name="keywords" content="关键字列表" /> <meta name="description" content="网页描述" /> <link rel="stylesheet" type="text/css" href="" /> <style type="text/css"> div{ width:100px; height:100px; border:1px solid red; position:relative; left:0px; top:0px; transition:all 2s; } div:hover{ left:30px; } </style> <script type="text/javascript"> </script> </head> <body> <div></div> </body> </html>
以上是关于2016.11.22css实现几个效果的主要内容，如果未能解决你的问题，请参考以下文章