您现在的位置是:首页 > Web > 点缀DIV,加上边框阴影,以及背景透明网站首页 Web

点缀DIV,加上边框阴影,以及背景透明

简介在CSS 3中有着很多炫酷的属性,如box-shadow,transform,其中transform的含义是:改变,使…变形;转换以及透明属性,这些是个人在使用过程中总结的一些属性和样式,可以直接使用。

1.给DIV加上边框阴影

div{box-shadow:0 0 1px #000 inset;} 

代表边框间距靠左0 靠上0 和1px阴影范围 阴影颜色为黑色(#000),

有inset 代表框内阴影 ,不带inset 代表框外阴影。

注意:

box-shadow:0px 0px 1px #000

第1个值为0时,代表左右边框阴影 为1px范围

第1个值为正整数 代表 左边框阴影

第1个值为负整数 代表 右边框阴影

同理

第2个值为0 代表上下边框阴影

第2个值为正整数 代表1px阴影距离上边框多少

第1个值为负整数 代表下边框阴影设置

在style里面加入,四个角度都要带上

2.实现DIV背景透明

只需要在需要透明的div上加上下面的style:

style="filter:alpha(Opacity=80);-moz-opacity:0.7;opacity: 0.7"

3.实现DIV旋转角度

只需要在需要透明的div上加上下面的style:

那么在CSS3中, transform是什么?

transform的含义是:改变,使…变形;转换

CSS3 transform都有哪些常用属性?

transform的属性包括:rotate() / skew() / scale() / translate(,) ,

分别还有x、y之分,比如:rotatex() 和 rotatey() ,以此类推。

下面我们来分解各个属性的用法:

transform:rotate(10deg);

注意:10deg就相当于10°(度)

transform:rotate():

含义:旋转;其中“deg”是“度”的意思,如“10deg”表示“10度”下同。

.demo_transform1{-webkit-transform:rotate(10deg);-moz-transform:rotate(10deg)}

transform:skew():

含义:倾斜;

.demo_transform2{-webkit-transform:skew(20deg);-moz-transform:skew(20deg)}

transform:scale():

含义:比例;“1.5”表示以1.5的比例放大,如果要放大2倍,须写成“2.0”,缩小则为负“-”。


如需转载,请注明文章出处和来源网址:http://johnbin.cn


分享给朋友吧:

微信里点“发现”,扫一下
二维码便可将文本分享至朋友圈

声明:

1,如果您发现本文有错误或者有疑问,请 联系站长 修正或 留言
2,本站提供的知识或者学习方法均为博主学习工作过程中所遇到的问题的解决办法积累!
3,部分文章是引用借鉴其他优秀个人博客的知识,学习如逆水行舟,不进则退!
4,本站推荐的资源均经由站长检测或者个人发布,不包含恶意软件病毒代码等,如果你发现此类问题,请向站长举报!
5,本站仅提供文件的免费下载服务,如果你对代码程序软件的使用有任何疑惑,请留言。
6,本网站在文章内容仅供于学习参考使用,请勿作为商业通途使用,版权归原作者所有。如您对内容、版权等问题存在异议请与本站联系,我们会及时进行处理解决。

文章评论

Top