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绝大多数浏览器不兼容 

     

  • 相关阅读:
    MySQL 序列使用
    04_使用httpclient提交参数_get提交参数
    03_使用httpurlconnection提交参数_get中文参数解决&post提交
    01_今日内容
    00_消息机制回顾
    20_内容回顾
    19_MySmartImageView添加展示默认图的功能
    18_MySmartImageView实现
    17_自定义View对象构造说明
    16_新闻客户端_展示图片内容完成
  • 原文地址:https://www.cnblogs.com/waitingforbb/p/7066816.html
Copyright © 2011-2022 走看看