zoukankan      html  css  js  c++  java
  • CSS新增样式4

    1.阴影:box-shadow:none(无阴影)

                                      inset(显示阴影在里面),写法:box-shadow:inset/outset(外阴影)     px(阴影水平偏移值) px(阴影垂直为负)  px(阴影模糊值不为负) color;

                 总结:三个数值时,阴影的外延值就不存在了;两个数值时,阴影的模糊度和外延值就不存在了,默认颜色为黑色,水平偏移值和阴影垂直大于0出现在左和上,小于0出现                              在右和下 。

    2.圆角:border-radius:px(上) px(右) px(下) px(左);如果要设置椭圆代码如下:

                                                                                                                             例:100px; height:200px;   border-radius:100px/200px(正椭圆)

    3.边框图片background-image: {a.source(路径) b.slice(分割方式) c.width(宽度 )d.outset(扩展) e.repeat(平铺方式) f.strech(拉伸)}

    4.背景滚动或固定:background-attachment

    5.背景大小 :background-size:cover(被包含在容器内,在整个框内显示,不标准,等比例缩放)/contain(图片完全放置在容器内)

    6.裁剪:background-clip:border-box(向外裁剪)/padding-box(在边框以内)/content-box(包含内容包含padding)

    7.背景线性渐变:谷歌写法:background:-webkit-gradient     linear(值的名称)   x ,y(两个坐标开始)  x,y(两个坐标结束),from(red) to(blue)【从一个颜色向另一个颜色渐变】

                                火狐:background:-moz-linear-gradient(top,red,blue)

                                opera:background:-o-linear-gradient(top,red,blue)

                                IE:-ms-linear-gradient 后面同上

    8.文本效果

                    1.阴影:text-shadow

                    2.文本溢出:text-overflow      ellipsis显示省略标记,需要结合overflow:hidden和white-space:nowrap不换行。

                    3.连续文本换行:word-wrap{a.normal默认  b.break-word在边界内换行,如果需要词内也可换行

                    4.文本轮廓:text-outline绝大多数浏览器不兼容 

     

  • 相关阅读:
    BZOJ2705: [SDOI2012]Longge的问题 欧拉函数
    BZOJ3884: 上帝与集合的正确用法 拓展欧拉定理
    BZOJ1296: [SCOI2009]粉刷匠 DP
    BZOJ5293: [Bjoi2018]求和 树上差分
    BZOJ1398: Vijos1382寻找主人 Necklace 字符串最小表示法
    BZOJ5189: [Usaco2018 Jan]Cow at Large 贪心+LCA
    BZOJ2654: tree 二分答案+最小生成树
    BZOJ1304: [CQOI2009]叶子的染色 树形dp
    BZOJ1632: [Usaco2007 Feb]Lilypad Pond SPFA+最短路计数
    BZOJ1726: [Usaco2006 Nov]Roadblocks第二短路 K短路
  • 原文地址:https://www.cnblogs.com/waitingforbb/p/7066816.html
Copyright © 2011-2022 走看看