css 样式一

1. 使用css实现箭头图标:

①. 一个div盒子,有border值.

②. border占满所有内容区,盒子是实心的.只剩4个边框.

③. 将div的宽度和高度设置为0,再设置边框样式:
   .triangle{
     width: 0;
     height: 0;
     border-top: 50px solid black;
     border-right: 50px solid red;
     border-bottom: 50px solid green;
     border-left: 50px solid blue;
   }
   a. 边框宽度设置为50px,处理时会在边框交接处,一边占用一半的面积.

④. 将上、左、右边框设置成transparent,就可以画出一个三角形,简洁写法:
   .triangle{
     width: 0;
     height: 0;
     border: 50px solid transparent;
     border-top-color: black;
   }

2. 解决点击一个链接或通过js定义的可点击元素时,会高亮显(出现一个半透明的灰色背景):

-webkit-tap-highlight-color

注:
①. 可以把颜色设置为透明或指定颜色.
    a. 这个属性只用于iOS (iPhone和iPad).
    b. 目前微信浏览器不支持.

②. 颜色的alpha值:
    a. 0                  => 想要禁用这个高亮
    b. transparent        => 背景色透明,没有颜色(android下无效)
    b. rgba(255,0,0,0.5)  => 设置高亮色为50%透明的红色

③. 同时屏蔽ios和android出现的阴影:
    -webkit-tap-highlight-color: rgba(255,255,255,0)