zoukankan      html  css  js  c++  java
  • css3常用属性

    颜色模式

    rgba(0,0,0,0.5) a代表alpha半透明通道
    
    但凡是用到颜色的地方,都可以使用rgba颜色模式。 包括文字颜色,背景色,边框色。
    
    opacity:0.1; 这个和rgba的差别在它会把内容的透明度改变

    圆角

    border-radius    圆角的半径
    
    它可以设置多个值。多个值的用法和margin类似。
     
    box-shadow: 水平偏移  垂直偏移  羽化   投影大小   颜色  inset(内投影)
    
    内投影是可选的,注意没有outset。
    
    盒子投影可设置多组值,用逗号隔开。

    盒子投影

    box-shadow: 水平偏移  垂直偏移  羽化   投影大小   颜色  inset(内投影)
    
    内投影是可选的,注意没有outset。
    
    PS : 盒子投影可设置多组值,用逗号隔开。

    文字投影

    text-shadow: 水平偏移  垂直偏移  羽化   颜色  
    
    比盒子投影少了投影大小和内投影,其他用法跟盒子投影一样。
    
    盒子投影和边框如果没设置颜色,默认会和文字的颜色相同(currentColor)。

    背景图固定

    background-attachment: fixed;
    
    scroll: 随着页面的滚动轴背景图片将移动
    
    fixed: 随着页面的滚动轴背景图片不会移动
    
    效果:盒子滚动,但背景图是不动的,类似盒子固定定位。

    背景图尺寸

    background-size
    
    取值:
    
    固定值(px): 100px  200px;
    
    百分比(%):  50%  ;      百分比是基于当前盒子的宽和度
    
    特殊值:(出现特殊值的都不会变形)
    
    auto          自动,正比例缩放。
    
    cover         把图片填满整个盒子 (较常用)
    
    contain  把图片完整显示,但是可能出现留白
    
    background:url("../images/dd.png") no-repeat  left/contain;后面的/contain等同于background-size:contain;

    可以通过 这个 来给背景图进行padding设置 例如 盒子宽高 给80px background-size: 70px 70px; 这样就可以形成10px的padding

    模糊背景

     filter: blur(3px); 和opacity类似会把内容给模糊掉
  • 相关阅读:
    hdu 1875 畅通project再续(kruskal算法计算最小生成树)
    Http post提交和get提交
    我的软考之路(五)——数据结构与算法(3)之图
    WPF 布局控件 之 DockPanel
    oracle存储结构
    马化腾最想做的事情是人工智能
    Android_Zip解压缩工具
    Unity的 Stats 窗体, Batched、SetPass、Draw Call 等
    尝试 “实验楼”在线教育平台
    POJ 3181 Dollar Dayz 01全然背包问题
  • 原文地址:https://www.cnblogs.com/Model-Zachary/p/6141604.html
Copyright © 2011-2022 走看看