找回密码
 立即注册
搜索
查看: 1478|回复: 0

CSS3 背景 background-clip

[复制链接]

581

主题

110

回帖

4066

积分

管理员

积分
4066

众神之神

发表于 2015-11-20 08:47:30 | 显示全部楼层 |阅读模式
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.         <meta charset="UTF-8">
  5.         <title>background</title>
  6.         <style>
  7.                 div {
  8.                         background-color: #000000;
  9.                         border: dashed 15px #008000;
  10.                         padding: 30px;
  11.                         color: white;
  12.                         font-size: 30px;
  13.                         font-weight: bold;
  14.                 }
  15.                 .div1 {
  16.                         background-clip: border-box;
  17.                 }
  18.                 .div2 {
  19.                         margin-top: 40px;
  20.                         background-clip: padding-box;
  21.                 }
  22.                 .div3 {
  23.                         margin-top: 40px;
  24.                         background-clip: content-box;
  25.                 }
  26.         </style>
  27. </head>
  28. <body>
  29.         <div class="div1">实例1</div>
  30.         <div class="div2">实例2</div>
  31.         <div class="div3">实例3</div>
  32. </body>
  33. </html>
复制代码
background-clip:规定背景的绘制区域;
border-box        背景被裁剪到边框盒。
padding-box        背景被裁剪到内边距框。
content-box        背景被裁剪到内容框。

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|十三博客 ( 鲁ICP备2023000528号 )

GMT+8, 2026-6-1 18:41 , Processed in 0.048650 second(s), 22 queries .

Powered by Discuz! X3.5

© 2001-2024 Discuz! Team.

快速回复 返回顶部 返回列表