> 웹 프론트엔드 > HTML 튜토리얼 > CSS技巧和犯错点总结_html/css_WEB-ITnose

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

WBOY
풀어 주다: 2016-06-24 11:20:45
원래의
1077명이 탐색했습니다.

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:背景色

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿