zoukankan      html  css  js  c++  java
  • CSS3 --- 盒子

    1.设置文本阴影

    语法:text-shadow:水平 垂直 模糊强度 阴影颜色; 例:

    text-shadow:2px 2px 2px deep gray;

    水平(必需):正值向右,负值向左;

    垂直(必需):正值向下,负值向上;

    模糊强度:0为最清晰,值越大阴影越模糊;

    注意:文字、盒子都可以加多组阴影,例:text-shadow:2px 2px 2px red,-2px -2px 2px blue,... ...;

    2.盒子阴影

    语法:box-shadow:水平 垂直 模糊强度 模糊尺寸 颜色 内/外阴影;例:

    box-shadow:2px 2px 2px 2px gray [outset];   //外阴影(默认),outset可以不写
    box-shadow:2px 2px 2px 2px gray inset;    //内阴影

    水平(必需):正值向右,负值向左;

    垂直(必需):正值向下,负值向上;

    模糊强度(必需):0为最清晰,值越大阴影越模糊;

    模糊尺寸:值越大阴影面积越大;

    颜色(必需):阴影颜色;

    3.设置盒子圆角

    语法:border-radius:左上 右上 右下 左下; 例:

    border-radius:10px 15px 20px 25px;   //顺序为左上->右上->右下->左下,可单独设置

    如果四个角圆角一致可简写:

    border-radius:10px;   //四个圆角都为10px

    4.设置半透明颜色

    文字半透明:

    color:rgba(255,0,0,0.3);   //文字为红色,透明度为0.3

    背景半透明:

    background:rgba(0,0,blue,0.8);   // 背景色为蓝色,透明度为0.8

    注意:透明值越小,透明度越高;

    5.设置背景图片的尺寸

    background-size:宽度 高度;例:

    background-size:400px 500px;   //如果背景图片过小,背景图片可以平铺

    background-size:cover;   背景图片会把整个盒子(宽和高)填充满,不平铺;

    background-size:contain;   背景图片将盒子的宽或者高完全覆盖就停止,不平铺;

  • 相关阅读:
    Multiple markers at this line
    用递归和位移进行枚举子集合
    Android开发如何双击返回键退出程序
    Android ImageView设置图片原理(下)
    北大OJ百练——2721:忽略大小写比较字符串大小
    场景示例 Nginx 访问日志
    2 插件管理
    第一章 入门示例
    zabbix 通过gateway 获取远程主机的JMX信息
    zabbix 通过gateway 获取远程主机的JMX信息
  • 原文地址:https://www.cnblogs.com/wells33373/p/8194319.html
Copyright © 2011-2022 走看看