首页
关于视觉癖
设计服务
热门主题
投稿通道
设计师入驻
设计师招聘
在线留言
联系我们

热门主题

当前位置:视觉癖 > 热门主题 >

background-clip属性(CSS设置背景的绘制区域)

发布时间:2021-06-10 14:45 所属分类:热门主题 浏览次数:
  background-clip属性
  CSSbackground-clip属性
  作用:规定背景的绘制区域。
  语法:
  background-clip:border-box|padding-box|content-box;
  属性值:
  ●border-box:背景被裁剪到边框盒,即边框以内的区域。
  ●padding-box:背景被裁剪到内边距框,即padding以内区域。
  ●content-box:背景被裁剪到内容框,即内容以内的区域。
  注:InternetExplorer8以及更早的版本不支持background-clip属性。
  CSSbackground-clip属性的使用示例
  <!DOCTYPEhtml>
  <html>
  <head>
  <style>
  div
  {
  width:300px;
  height:300px;
  padding:50px;
  background-color:yellow;
  background-clip:content-box;
  border:2pxsolid#92b901;
  }
  </style>
  </head>
  <body>
  <div>
  这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。
  </div>
  </body>
  </html>
CSS
  CSS设置背景的绘制区域
  index.html
  <styletype="text/css">
  div{
  width:20%;
  height:100px;
  margin:15px;
  background:#CF0;
  border:10pxdotted#000;/*点线*/
  float:left;
  }
  div:nth-of-type(1){
  padding:35px;/*内边距*/
  }
  div:nth-of-type(2){
  padding:35px;
  background-clip:padding-box;/**/
  }
  div:nth-of-type(3){
  padding:35px;
  background-clip:content-box;
  }
  </style>
  </head>
  <body>
  <div>
  <h3>没有背景剪裁(默认值:border-box)<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
  </div>
  <div>
  <h3>padding-box<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
  </div>
  <div>
  <h3>content-box<p/>CSS3中background-clip背景剪裁属性是从指定位置开始绘制。</h3>
  ————————————————
  版权声明:本文为CSDN博主「凌冰_」的原创文章,遵循CC4.0BY-SA版权协议,转载请附上原文出处链接及本声明。
  原文链接:https://blog.csdn.net/hlx20080808/article/details/69568879
  ?
作品标签: CSS 属性

评论列表(共5人参与)参与讨论或分享设计作品获得视觉癖积分奖励

用户头像图片
    叛逆是我的注册会员
    2021-06-10 23:59:24

    结束只播放一次。 2、如果取值为infinite,动画将会无限次的播放。 举例: i作为html中的标签是用来做什么的,接下来我们就一起来研讨html中标签吧!

    回复
用户头像图片
    时候, 注册会员
    2021-06-10 20:41:40

    ce-visibility特点设置为hidden,所以应该是不可见的。 DIV1 background-clip属性(CSS设/uploads/allimg/210605/1-21060。。。

      用户头像图片
        -timi注册会员
        2021-06-10 19:43:50

        @时候, :background-clip属性在十万株苜蓿草中,你可能只会发现一株是四叶草,机会率大约是十万分之一。 ~~~

    回复
用户头像图片
    美柔美。字体游客
    2021-06-10 10:10:36

    游客38202:background-clip属> 美国工业规划协会IDSA(IndustrialDesignersSocietyofAmerica):工业规划是一项专门的服务性作业,为运用者和生产者双方的利益而对产品和产品系列的外形、功能v> 最终,也由于标签是HTML5中新添加的标签,所以在IE8以及更早版别的IE浏览器中是不支持标签的。不过都已经2020年了信任也没有谁还会去用那么老

    回复
用户头像图片
    是改日的注册会员
    2021-06-10 3:15:0

    框盒,即边框以内的区域。 ●padding-box:背景被裁剪到内 wrap:当提交表单时,文本区域中的文本应该怎样换行(值:hard、soft)。 标签支撑html大局特点和html事件

    回复