css3--background-attachment background-origin background-clip box-shadow border-radius

最新推荐文章于 2024-05-17 13:28:17 发布
最新推荐文章于 2024-05-17 13:28:17 发布
阅读量101 收藏
点赞数 1
分类专栏： css 文章标签： css3 css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_65402230/article/details/127515571
版权

background-attachment

fixed相对于视口定位 不会随着滚动条一起滚动

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-attachment: fixed;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
      <p>这是测试 这是测试 这是测试</p>
    </div>
  </body>
</html>

在这里插入图片描述
local 相对于内容区定位 会跟随滚动条一起滚动

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-attachment: local;
      }

在这里插入图片描述
scroll 相对于文本定位 不会跟随滚动条一起滚动 与fixed差不多 只定位方式不同

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-attachment: scroll;
      }

在这里插入图片描述

background-origin

当 background-attachment 设置为fixed 时 background-origin 与 background-position不生效
更改定位点
border-box 相对于border定位

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-attachment: fixed;
        background-origin: border-box;
      }

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 0 0;
        background-attachment: fixed;
        background-origin: border-box;
      }

在这里插入图片描述
padding-box 相对于内边距定位

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 20px 20px;
        background-attachment: scroll;
        background-origin: padding-box;
      }

在这里插入图片描述

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 20px 20px;
        background-attachment: scroll;
        background-origin: content-box;
      }

在这里插入图片描述

background-clip

裁剪图片
border-box
以边框裁剪

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        background-attachment: fixed;
        background-origin: border-box;
        background-clip: border-box;
      }

在这里插入图片描述
padding-box 以内边距裁剪

在这里插入图片描述content-box 以内容裁剪

      .box {
        padding: 50px;
        width: 1000px;
        height: 1000px;
        border: 50px solid rgba(123, 123, 123, 0.5);
        overflow: scroll;
        background-image: url(img/1.jpg);
        background-repeat: no-repeat;
        background-position: 0px 0px;
        background-attachment: fixed;
        background-origin: border-box;
        background-clip: content-box;
      }

在这里插入图片描述

边框圆角

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 200px;
        height: 200px;
        border: 20px solid #000;
        box-sizing: border-box;
        border-top: 20px solid red;
        border-right: 20px solid yellow;
        border-bottom-color: blue;
        border-top-left-radius: 50%;
        border-top-right-radius: 50%;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

在这里插入图片描述
椭圆

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .box {
        width: 400px;
        height: 200px;
        border: 20px solid #000;
        box-sizing: border-box;
        border-top: 20px solid red;
        border-right: 20px solid yellow;
        border-bottom-color: blue;
        border-top-left-radius: 200px 100px;
        border-top-right-radius: 200px 100px;
        border-bottom-right-radius: 50%;
        border-bottom-left-radius: 50%;
      }
    </style>
  </head>
  <body>
    <div class="box"></div>
  </body>
</html>

在这里插入图片描述

border-radius

一个值 对应四个角
两个值 对应 左上右下 左下右上
三个值 对应 左上 右上左下 右下
四个值 对应 左上 右上 右下 左下
100px / 50px
相当于 从左上开始顺时针到左下
100 50 border-top-left-radius
100 50 border-top-right-radius
100 50 border-bottom-left-radius
100 50 border-bottom-right-radius

100px 50px / 50px 30px
100 50 border-top-left-radius
50 30 border-top-right-radius
100 50 border-bottom-left-radius
50 30 border-bottom-right-radius

100px 50px 80px /50px 30px
100 50 border-top-left-radius
50 30 border-top-right-radius
80 50 border-bottom-left-radius
50 30 border-bottom-right-radius

当然也可以设置百分比

box-shadow

x-offset x方向偏移距离
y-offset y方向偏移距离
blur-radius 模糊半径 越大越模糊
spead-radius 阴影扩展半径 越大阴影越大
inset 向内投影 默认向外投影
color 阴影颜色

      .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        box-shadow: 10px 10px 10px 10px inset #bfa;
      }

在这里插入图片描述
可以使用,设置多重阴影

      .box {
        width: 200px;
        height: 200px;
        background-color: orange;
        box-shadow: 4px 2px 1px 10px #bfa, 0px 0px 1px 10px #000, -4px -2px 10px inset blue;
      }

在这里插入图片描述

_聪明勇敢有力气
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
你不知道的border-style border-radius background
twinkle的博客
05-03 559
border-style 一个小技巧 如果设置border-style 里面没有设置颜色， 直接使用color： 边框的颜色会改变成对应的颜色 原因：css1-css2 会传承color的颜色， css3 用了中转变量currentColor（了解） 圆角 border-radius border-radius ：10px 四个圆角都圆角了,相当于 border-radius 1...
CSS基础-初级
qq_40046544的博客
12-13 413
CSS 指的是层叠样式表（Cascading Style Sheets）CSS 描述了如何在屏幕、纸张或其他媒体上显示 HTML 元素CSS 节省了大量工作。它可以同时控制多张网页的布局外部样式表存储在 CSS 文件。
45-CSS介绍
qq_59609098的博客
03-14 1144
还可以使用另一种引入css文件的方式 css中选择器---------------------- 元素(标签)选择器： 它可以对页面上相同的标签进行统一的设置，它描述的就是标签的名称 CSS伪类： CSS伪类可对css的选择器添加一些特殊效果 只要触发时，才会有效果 可以理解位该标签的使用这个曹祖偶，如a:link即a标签使用:link操作，这是style的语法，可以将:link看出{}，类似于a{} 大括号里有操作，即在这个操作上，加一点操作{}，相当于两个{}，实现不用在{}里多写了 伪类属性列
CSS基础 - 4+6+9
极正君
03-10 152
CSS基础-语法和选择器 - 4种引入方式 + 6类选择器 + 9大属性
CSS3-边框和背景
李刚的学习专栏
09-23 1949
下述内容主要讲述了《HTML5权威指南》第19章关于“使用边框和背景”。 CSS3中边框和样式得到了增强。例如：可以创建圆角边框，使用图像边框，为元素创建阴影。一、应用边框样式表 基本边框属性 属性 说明 值 border-width 设置边框的宽度 <长度值>、<百分数>、Thin、medium、thick border-style 设置绘制边框使用的样式 non
css-1
qq_39290137的博客
03-24 337
常用选择器 元素选择器 id选择器 # 类选择器 . 通配选择器 * 分组选择器（并集 A,B） 复合选择器 交集选择器 (交集 AB) 关系选择器 父子 （父>子） 后代 （祖先 后代） 相邻兄弟 （兄+弟（最近的弟）） 通用兄弟 （兄~弟（所有弟）） 属性选择器 CSS[] 伪类选择器 : a的伪类 伪元素选择器 :: 样式继承 选择器的权重 选择器的权重（优先级） CSS层叠顺序 单位 像素和百
前端开发--CSS基础
student66666666的博客
07-22 1464
前端开发、CSS
Css3 记录参考手册-新增伪类
知其白，守其黑；和其光，同其尘。
06-25 537
CSS3 是最新的 CSS 标准。一篇文章向您讲解 CSS3 中的新特性。
CSS3中background-clip和background-origin的区别示例介绍
09-25
本文为大家介绍下CSS3中background-clip和background-origin的区别，感兴趣的朋友可以参考下
CSS text-shadow，box-shadow，border-radius属性
09-25
将对 CSS 的几个新属性 (text-shadow，box-shadow，and border-radius) 做基本介绍。这些 CSS3 属性通常用来加强页面布局。
css3 border-radius属性详解
12-09
有什么用？... border-radius: 50%; } 上述50%就是说设置各边圆角都为50%。 那么如何画个半圆？ 如下，把宽度设置为高度的两倍。 #demo2 { width:100px; height:50px; background:green; bo
深入浅出CSS3 background-clip,background-origin和border-image教程
09-25
最近在准备一个下学期参加比赛的概念网站，希望能用到CSS3的新特性，比如background的background-clip或background-origin或border-image。但仅仅是依靠w3schools上的文档和说明发现很多臆想中的效果都实现不了。
CSS3教程：background-clip和background-origin
09-27
原文：http://www.planabc.net/2008/04/14/background-clip_background-origin/background-clip 和 background-origin 是 CSS3 中新加的 background module 属性，用来确定背景的定位。background-clip 用来判断 ...
再次修改导航样式，看看哪个好看
lulei5153的博客
05-17 162
【代码】再次修改导航样式，看看哪个好看。
Html5 + Css3笔记详细汇总大全
最新发布
weixin_56334307的博客
05-17 241
left + margin-left + border-left + padding-left = width + padding-right + border-right + margin-right + right= 包含块的内容区的宽度。margin-left+border-left+padding-left+width+padding-right+border-right+margin-right = 其父元素内容区的宽度（必须满足）
css超出部分省略（单行、多行，多种方法实现）
阿乐的博客
05-14 404
缺点:使用了私有属性。
css: 动态设置网格线
1111111111
05-14 347
唯一的遗憾是，宽度和高度本来想设置为数字类型，通过input-number输入，然后在css里拼上‘px’，像下面这种写法，会报错，所以只能把px单位放在输入框里。上面的html和下面的css不在同一个vue文件里，虽然变量名不同，一个是formData，一个是designData，所指向的对象是相同的。注意：style里不要写lang="scss" 不然会一直报错。另外还有一个小小的问题，页面缩放的时候，网格线会消失。把网格颜色，宽高和透明度做成可配置项。
css border-radius clip-path
01-07
border-radius和clip-path都是用来实现元素的圆角效果的CSS属性，但它们的实现方式有所不同。 1. border-radius属性： border-radius属性用于设置元素的圆角效果。它接受一个或多个长度值或百分比值作为参数，用于...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

_聪明勇敢有力气

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值