圆角框 ：css3的border-radius和border-image
border-radius ：上，右，下，左 （四个属性值）
border-image ：url(),剪裁位置,重复性
eg：border-image:url(),25% 25% 25% 25% / 25px round round;
↑ ↑ ↑
边框宽 水平方向 垂直方向
山顶角 （利用border的特性）：
参考：http://www.jsann.com/post/CSS_to_achieve_the_principle_of_the_Peak_Point.html
阴影 ：box-shadow
box-shadow: 3px 3px 6px #666;
↑ ↑ ↑ ↑
水平阴影位置 垂直阴影位置 阴影宽度 颜色
不透明度 ：
rgba 同时设置颜色和不透明度。
background-color: rbga(0,0,0,0.8)
最后是透明度，80%
视差滚动 ：
把背景图像相对于窗口大小进行水平偏移20%，当水平调整窗口大小时，背景图像的位置会改变，产生移动效果。
background-position: 20% 0;
把中景：设置为40%
前景：设置为150%
数值越大，想对移动得就越快，产生更有深度的感觉。
链接应用样式 ：
a的伪类顺序：Lord Vader Hates Furry Animals
a:link, a:visited, a:hover, a:focus, a:active
[如果不按照这个顺序定义的话，两者优先级是相同的，link和visited的样式会覆盖其他三个]
a的link下划线：
1.边框border
2.图片
代码参考：
.box {
width: 45%;
margin-top: 2em;
padding: 30px 10px;
border-radius: 1em;
color: #000;
position: left;
}
/*跳转后黄色→白色，伪类选择器前面也可以加id,gif只播了一次就停掉了*/←待解决
/* #comment3:target {
background-image: url("fade.gif");
}*/
.box:target {
/*background-image: url("fade.gif");*/
}
a:link {
color: red;
}
a:visited {
color: grey;
}
a:link,a:visited {
text-decoration: none;
}
a:hover,a:focus,a:active{
text-decoration: underline;
border-bottom-style: solid; //下划线类型
color: darkblue;
}
Comments
Comment #1
Lorem ipsum dolor sit amet
comment2
查看更多关于CSS技巧和犯错点总结_html/css_WEB-ITnose的详细内容...