web前端菜鸟笔记:HTML5+CSS3代码的简写

是 否 +2 论坛币

k人 参与回答

经管之家送您一份

应届毕业生专属福利!

求职就业群

赵安豆老师微信：zhaoandou666

经管之家联合CDA

送您一个全额奖学金名额~ !

立即领取

感谢您参与论坛问题回答

经管之家送您两个论坛币！

+2 论坛币

我是一只web前端开发菜鸟，才刚刚步入web前端这个领域，在学习web前端(http://www.maiziedu.com/course/web/)的时候，发现自己理解最深刻的还是代码，既爱又恨却不知如何去感悟。

background属性简写：

background-position属性组合方式：[ left | center | right ] || [ top | bottom ] （组合中代码都是以空格间距）

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

background属性简写顺 序：background-color || background-image || background-repeat || background-attachment || background-position（值得一说的是在一般情况下背景色和背景图是不会放在一起使用的，一起使用的情况很少，但这种情况都是在背景图为 透明的情况下会使用）

圆角框：css3的border-radius和border-image

border-radius：上，右，下，左 （四个属性值）

border-image：url(),剪裁位置,重复性

eg：border-image:url(),25% 25% 25% 25% / 25px round round;（边框宽  水平方向  垂直方向）

阴影：box-shadow

box-shadow: 3px （水平阴影位置）  3px （垂直阴影位置）  6px （阴影宽度）   #666（颜色）;

不透明度：

rgba 同时设置颜色和不透明度。

font-family: 'Open Sans', Helvetica, Arial, sans-serif; line-height: 23.8px;">

最后显示出的透明度为80%

opacity

这个属性值同样能实现透明的效果，但是不是特定的在背景实现而是前景色实现

属性值0-1之间 0为透明 1为不透明

总结

在我们敲打代码时，我们不能只是看实现的效果，还要优雅的去敲代码，虽然我们宅，但是我们还是要宅的优雅。做一个优雅的前端开发人员是有必要的.

扫码加我 拉你入群

请注明：姓名-公司-职位

以便审核进群资格，未注明则拒绝

分享0 收藏0 回帖

关键词：HTML5 HTML WEB htm Background HTML5