Home > Web Front-end > HTML Tutorial > CSS技巧和犯错点总结_html/css_WEB-ITnose

CSS技巧和犯错点总结_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 11:20:45
Original
1077 people have browsed it

4.14

CSS  background属性简写:

background-position属性组合方式:[ left | center | right ] || [ top | bottom ] (组合后中间没有下划线)

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动

background属性简写顺序:background-color || background-image || background-repeat || background-attachment || background-position

 

4.15

圆角框: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.图片

 

代码参考:




Comments



Comment #1


Lorem ipsum dolor sit amet


comment2


Comment #2


Mauris sit amet nisl in eros porta faucibus.


comment3


Comment #3


viverra in, massa. Sed a sem.


comment1

==========================

color:前景色(字体颜色)

background-color:背景色

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template