HTML5技术

HTML5+CSS3 - 代码简写篇 - 业余的强迫症患者丶

字号+ 作者:H5之家 来源:博客园 2016-04-18 12:00 我要评论( )

有话先说:我是一只菜鸟,还是一只刚步入前端这个领域的小菜年,在不断的进阶,理解最深刻的还是代码,既爱又恨却不知如何去感悟。 background属性简写: background-position属性组合方式:[left|center|right] || [top|bottom] (组合中代码都是以空格间距

有话先说:我是一只菜鸟,还是一只刚步入前端这个领域的小菜年,在不断的进阶,理解最深刻的还是代码,既爱又恨却不知如何去感悟。

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为不透明

总结

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

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 这短短几行代码价值一万 - 小尧弟

    这短短几行代码价值一万 - 小尧弟

    2017-04-22 09:00

  • Android 代码库(自定义一套 Dialog通用提示框 ) - 小小情意

    Android 代码库(自定义一套 Dialog通用提示框 ) - 小小情意

    2017-04-21 11:01

  • 前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代码你撸了嘛

    前端实现搜索记录功能也就是天猫app历史记录存储方便浏览 - 今天的代

    2017-04-12 14:00

  • flash跳帧代码 - 鬼界家族

    flash跳帧代码 - 鬼界家族

    2017-04-12 14:00

网友点评