zoukankan      html  css  js  c++  java
  • HTML5+CSS3 代码简写篇

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

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

    总结

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

  • 相关阅读:
    JS精度问题(0.1+0.2 = 0.3吗?)
    力导向算法的研究与改进
    React Hooks的memo和useCallback
    React Hooks vs Vue Composition Api
    docker常用命令
    win10一台电脑上配置多个git账户
    eslint+prettier 统一代码风格
    c#中关于值类型,引用类型在栈,堆栈的分配
    js里的__proto__和prototype
    golang之冒泡排序
  • 原文地址:https://www.cnblogs.com/hyea/p/5400932.html
Copyright © 2011-2022 走看看