zoukankan      html  css  js  c++  java
  • HTML总结

    设置块阴影:

    box-shadow:阴影水平偏移 阴影垂直偏移 阴影模糊值 阴影边框 阴影颜色;

    box-shadow:length length length length color;

     

    为了兼容不同的浏览器需要加上通常三个一起写:

    box-shadow:10px 10px 5px #444;

    -moz-box-shadow:10px 10px 5px #444;  //为了兼容不同的浏览器
    -webkit-box-shadow:10px 10px 5px #444;  //为了兼容不同的浏览器

    box-shadow可以同时使用多次,例如个边框设置不同颜色的阴影,但是有顺序,先写的在顶层(z轴靠上)

    设置字体阴影:

    text-shadow:阴影水平偏移 阴影垂直偏移 阴影模糊值 阴影颜色;

    鼠标悬停样式:

    link设置未点击的样式,vistied设置点击过的样式,hover设置悬停样式,active设置点击样式

    其中hover不仅对连接起作用,还对所有元素起作用。

    例如:鼠标悬停时让div的背景颜色改变   div:hover{background-color:#000;}

      鼠标悬停时让div里的算盘标签显示(更改透明度) div:hover span{opacity:1;}

    鼠标悬停显示阴影

    鼠标悬停设置块阴影 box-shadow

    鼠标悬停缩放样式

    transform标签允许我们对元素进行旋转、缩放、移动和倾斜

    为了兼容同样一起写:transform:rotate(7deg); 7角度2D旋转

              -ms-transform:rotate(7deg);    /* IE 9 */  

              -moz-transform:rotate(7deg); 

              -webkit-transform:rotate(7deg); 

              -o-transform:rotate(7deg); 

    鼠标悬停改变transform属性实现缩放效果div:hover{transform:scale(x,y)}

    svg基础css属性 

    stroke-dasharray:设置使用虚线来对图形进行描边

    stroke-dashoffset:设置图形描边虚线的偏移值

    http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201506152043.html

    鼠标悬停的过渡效果  

    transition:property duration timing-function delay;

    transition-property:规定设置过渡效果的 CSS 属性的名称。

      例如:transition-property:width;  

         transition-duration:2s;始终设置这个属性,不然没效果

          div:hover{100px;}和他的属性对应产生效果

    transition-duration:规定完成过渡效果需要多少秒或毫秒。

    transition-timing-function:规定速度效果的速度曲线

      http://www.w3school.com.cn/cssref/pr_transition-timing-function.asp

    transition-delay:定义过渡效果何时开始。

    未完待续。。。

  • 相关阅读:
    SGU 242. Student's Morning( 网络流 )
    8.23单词
    bzoj1083:繁忙的城市
    求连通分量
    bzoj2761:不重复数字
    bzoj1207:打鼹鼠
    bzoj2748:音量调节
    bzoj1050:旅行comf
    bzoj1996:合唱队
    羞耻羞耻羞耻!!!
  • 原文地址:https://www.cnblogs.com/yongjiapei/p/5514687.html
Copyright © 2011-2022 走看看