CSS3开发总结（圆角、盒阴影、边界图片）

CSS3开发总结（圆角）
12/100
发布文章
qq_41913971

CSS3

  • 1）圆角 border-radius
  • 2）盒阴影 box-shadow
  • 3）边界图片 border-image-source

1）圆角 border-radius

border-radius属性，复合属性。一个最多可指定四个圆角。

语法：
boder-radius: 1-4 | height | %

<style type="text/css">.demo{width: 200px;height: 200px;background: #008B8B;margin: 10px;display: inline-block;}.demo1{border-radius: 10px;}.demo2{border-radius: 20px;}.demo3{border-radius: 100px;}.demo4{border-radius: 200px;}</style><body><div class="demo demo1"></div><div class="demo demo2"></div><div class="demo demo3"></div><div class="demo demo4"></div></body>

在这里插入图片描述

<style type="text/css">.demo{width: 100px;height: 100px;background: #008B8B;margin: 10px;display: inline-block;}.demo1{border-radius: 10%;}.demo2{border-radius: 20%;}.demo3{border-radius: 50%;}.demo4{border-radius: 100%;}</style><body><div class="demo demo1"></div><div class="demo demo2"></div><div class="demo demo3"></div><div class="demo demo4"></div></body>

在这里插入图片描述
多值：
一个值：四角相同
两个值：value1（左上角与右下角） value2（右上角与左下角）
三个值：value1（左上角） value2（右上角与左下角） value3（右下角）
四个值：顺时针方向，从左上-右上-右下-左下

属性：
border-radius: 可设置四值
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-left-radius: 左下角
border-bottom-right-radius: 右下角

<style type="text/css">.demo{width: 100px;height: 100px;background: #008B8B;margin: 10px;display: inline-block;}.demo1{border-top-left-radius: 10%;border-top-right-radius: 10%;}.demo2{border-bottom-left-radius: 10%;border-bottom-right-radius: 10%;}.demo3{border-top-right-radius: 50%;}.demo4{border-bottom-right-radius: 100%;}</style>

在这里插入图片描述
兼容性：
IE9+ 、 FireFox4+ 、Chrome、Safari5+ 、 Opera

2）盒阴影 box-shadow

box-shadow 属性，可以设置一个或者多个阴影。

语法：
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平方向阴影。值可正可负，0为左右阴影，负数阴影在左边，正数阴影在右边
v-shadow：垂直方向阴影。值可正可负，0为上下阴影，负数阴影在上边，正数阴影在下边
blur： 阴影模糊度，不能取负数。
spread：阴影大小。值可正可负，正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
color：阴影颜色（颜色名称、十六进制、rgb、 rgba）
inset：有inset 代表框内阴影 ，不带inset 代表框外阴影

1）设置单个阴影
<style type="text/css">body{padding: 30px;}.demo{width: 200px;height: 200px;background: #fff;border-radius: 10px;box-shadow: 0px 0px 20px red;}</style><body><div class="demo"></div></body>

在这里插入图片描述

2）设置多个阴影： 多个阴影之间用逗号（,）隔开
.demo{width: 200px;height: 200px;background: #fff;border-radius: 10px;box-shadow: 0px 0px 10px red, 5px -5px 10px blue, 10px -10px 10px yellow, 20px -20px 10px black;}

在这里插入图片描述

兼容性：
IE9+、FireFox4+、Chrome、Safari5+、Opera

注意：小程序、小程序嵌套h5不支持颜色名称、十六进制，一定要用rgb、 rgba

3）边界图片 border-image-source

border-image-source 属性，指定要使用的图像。
属性：
border-image-source: 指定要使用的图像。
border-image -slice： 指定图像的边界向内偏移
border-image -width：指定图像边界的宽度
border-image-outset：指定在边框外部绘制border-image-area 的量
border-image-repeat：该属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）

语法：
border-image-source: none | image;
border-image-slice: number | % | fill;
border-image-width: number | % | auto;
border-image-outset: length | number;
border-image-repeat: stretch | repeat | round | initial | inherit;

<style type="text/css">body{padding: 30px;}.demo{width: 100px;height: 100px;border: 10px solid transparent;padding: 15px;}.demo1{border-image-source: url(../img/border.png);border-image-slice: 30;border-image-width: initial;border-image-outset: initial;border-image-repeat: round;}.demo2{-webkit-border-image: url(../img/border.png) 30 stretch; /* Safari 3.1-5 */-o-border-image: url(../img/border.png) 30 stretch; /* Opera 11-12.1 */border-image: url(../img/border.png) 30 stretch;}.demo3{-webkit-border-image: url(../img/border.png) 30 round; /* Safari 3.1-5 */-o-border-image: url(../img/border.png) 30 round; /* Opera 11-12.1 */border-image: url(../img/border.png) 30 round;}</style><body><div class="demo demo1">图像平铺（重复）</div><div class="demo demo2">图像平铺（重复）</div><div class="demo demo3">复合demo1</div></body>

在这里插入图片描述
CSS3
1）圆角 border-radius
2）盒阴影 box-shadow
3）边界图片 border-image-source
1）圆角 border-radius
border-radius属性，复合属性。一个最多可指定四个圆角。

语法：
boder-radius: 1-4 | height | %

<body><div class="demo demo1"></div><div class="demo demo2"></div><div class="demo demo3"></div><div class="demo demo4"></div>
</body>

在这里插入图片描述

<body><div class="demo demo1"></div><div class="demo demo2"></div><div class="demo demo3"></div><div class="demo demo4"></div>
</body>

在这里插入图片描述
多值：
一个值：四角相同
两个值：value1（左上角与右下角） value2（右上角与左下角）
三个值：value1（左上角） value2（右上角与左下角） value3（右下角）
四个值：顺时针方向，从左上-右上-右下-左下

属性：
border-radius: 可设置四值
border-top-left-radius: 左上角
border-top-right-radius: 右上角
border-bottom-left-radius: 左下角
border-bottom-right-radius: 右下角

在这里插入图片描述
兼容性：
IE9+ 、 FireFox4+ 、Chrome、Safari5+ 、 Opera

2）盒阴影 box-shadow
box-shadow 属性，可以设置一个或者多个阴影。

语法：
box-shadow: h-shadow v-shadow blur spread color inset;

h-shadow：水平方向阴影。值可正可负，0为左右阴影，负数阴影在左边，正数阴影在右边
v-shadow：垂直方向阴影。值可正可负，0为上下阴影，负数阴影在上边，正数阴影在下边
blur： 阴影模糊度，不能取负数。
spread：阴影大小。值可正可负，正数阴影扩大（阴影大小大于盒子大小），负数阴影缩小（阴影大小小于盒子大小），0阴影与盒子同等大小。
color：阴影颜色（颜色名称、十六进制、rgb、 rgba）
inset：有inset 代表框内阴影 ，不带inset 代表框外阴影

1）设置单个阴影

<body><div class="demo"></div>
</body>

在这里插入图片描述

2）设置多个阴影： 多个阴影之间用逗号（,）隔开
.demo{
width: 200px;
height: 200px;
background: #fff;
border-radius: 10px;
box-shadow: 0px 0px 10px red,
5px -5px 10px blue,
10px -10px 10px yellow,
20px -20px 10px black;
}
在这里插入图片描述

兼容性：
IE9+、FireFox4+、Chrome、Safari5+、Opera

注意：小程序、小程序嵌套h5不支持颜色名称、十六进制，一定要用rgb、 rgba

3）边界图片 border-image-source
border-image-source 属性，指定要使用的图像。
属性：
border-image-source: 指定要使用的图像。
border-image -slice： 指定图像的边界向内偏移
border-image -width：指定图像边界的宽度
border-image-outset：指定在边框外部绘制border-image-area 的量
border-image-repeat：该属性用于图像边界是否应重复（repeated）、拉伸（stretched）或铺满（rounded）

语法：
border-image-source: none | image;
border-image-slice: number | % | fill;
border-image-width: number | % | auto;
border-image-outset: length | number;
border-image-repeat: stretch | repeat | round | initial | inherit;

<body><div class="demo demo1">图像平铺（重复）</div><div class="demo demo2">图像平铺（重复）</div><div class="demo demo3">复合demo1</div>
</body>

在这里插入图片描述

文章目录
Markdown 3957 字数 215 行数 当前行 214, 当前列 204HTML 3411 字数 182 段落

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/401635.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

深入理解Android的startservice和bindservice

深入理解Android的startservice和bindservice

一、首先&#xff0c;让我们确认下什么是service&#xff1f; service就是android系统中的服务&#xff0c;它有这么几个特点&#xff1a;它无法与用户直接进行交互、它必须由用户或者其他程序显式的启动、它的优先级比较高&#xff0c; 它比处于前台的应用优先级低&am…
阅读更多...
PWA(Progressive Web App)入门系列：Notification

PWA(Progressive Web App)入门系列：Notification

前言 在很多场景下&#xff0c;需要一种通知的交互方式来提醒用户&#xff0c;传统方式下可以在页面实现一个 Dialog&#xff0c;或通过修改网页的 title 来实现消息的通知。然而传统的实现存在着一定的不足&#xff0c;在网页最小化的情况下&#xff0c;无法查看任何通知&…
阅读更多...
PWA(Progressive Web App)入门系列：Push

PWA(Progressive Web App)入门系列：Push

前言 很多时候&#xff0c;原生应用会通过一些消息推送来唤起用户的关注&#xff0c;增加驻留率。网页该怎么做呢&#xff1f;有没有类似原生应用的推送机制&#xff1f;推送功能又能玩出什么花样呢&#xff1f; Push API Push API 给与了 Web 应用程序接收从服务器发出的推送…
阅读更多...
Dom学习笔记

Dom学习笔记

DOM document object model 文档 对象 模型 文档&#xff1a;html页面 文档对象&#xff1a;页面中的元素 文档对象模型: 文档对象模型是w3c 为了能够让js去操作页面中的元素&#xff0c;定义的一套标准 DOM会把当前文档看作一棵树 树种的每一个元素就是文档树 的一个节点 同…
阅读更多...
PWA(Progressive Web App)入门系列：消息通讯

PWA(Progressive Web App)入门系列：消息通讯

前言 serviceWorker 的能力决定它要处理的事情&#xff0c;网站页面的部分逻辑处理会转移到 serviceWorker 层进行处理&#xff0c;这里就要页面层和 serviceWorker 层进行交互来实现消息通讯。 下面就说一下两个环境下的消息通讯。 窗口向 serviceWorker 通讯 这里列举出窗…
阅读更多...
查看Linux上程序或进程用到的库

查看Linux上程序或进程用到的库

为什么80%的码农都做不了架构师&#xff1f;>>> ldd /path/to/program 要找出某个特定可执行依赖的库&#xff0c;可以使用ldd命令。这个命令调用动态链接器去找到程序的库文件依赖关系。 objdump -p /path/to/program | grep NEEDED 注意&#xff01;并不推荐为任…
阅读更多...
超方便的 IndexDB 库

超方便的 IndexDB 库

前言 做为 Web 浏览器层的本地存储&#xff0c;IndexDB 做为一个很好的选择&#xff0c;几乎可以存储任意类型的数据&#xff0c;且是异步的。但是正常使用方式下需要在监听各种事件来处理结果&#xff0c;不是很方便&#xff0c;下面就对这一层进行了包装&#xff0c;使用方便…
阅读更多...
BP网络识别26个英文字母matlab

BP网络识别26个英文字母matlab

wx供重浩&#xff1a;创享日记 对话框发送&#xff1a;字母识别 获取完整源码源工程文件 一、 设计思想 字符识别在现代日常生活的应用越来越广泛&#xff0c;比如车辆牌照自动识别系统&#xff0c;手写识别系统&#xff0c;办公自动化等等。本文采用BP网络对26个英文字母进行…
阅读更多...
PWA(Progressive Web App)入门系列：Sync 后台同步

PWA(Progressive Web App)入门系列：Sync 后台同步

前言 当我们在一些地下停车场&#xff0c;或者在火车上、电梯等无法避免的信号不稳定的场所&#xff0c;使用网站应用处理一些表单操作或者上传数据的操作时&#xff0c;面临的将是网络连接错误的响应&#xff0c;使用户的操作白费。 而此刻 PWA 的 Sync API 就很好的解决了这…
阅读更多...
PWA(Progressive Web App)入门系列：安装 Web 应用

PWA(Progressive Web App)入门系列：安装 Web 应用

前言 在传统的 Web 应用中&#xff0c;通常只能通过在浏览器的地址栏里输入相应的网址才能进行访问&#xff0c;或者把网页地址创建到桌面上通过点击&#xff0c;然后在浏览器里打开。 传统模式下&#xff0c;图标、启动画面、主题色、视图模式、屏幕方向等等都无法去自定义和…
阅读更多...
「工具」IndexDB 版备忘录

「工具」IndexDB 版备忘录

前言 工作日常需要做一些备忘录&#xff0c;记录一些要做的事。在 Mac 上有使用系统的备忘录&#xff0c;但功能偏弱且文本格式调整不方便。再就是使用浏览器找专门的备忘录网站&#xff0c;功能是满足了&#xff0c;但是链路长&#xff0c;没有桌面软件直接。 所以最后干脆自…
阅读更多...
「工具」PWA Manifest图标及 favicon.ico 生成工具

「工具」PWA Manifest图标及 favicon.ico 生成工具

PWA 其中有一个能力就是把网站安装到系统桌面&#xff0c;以原生应用的体验来运行网站&#xff0c;使用户无需再找开浏览器输入网址进入网站&#xff0c;而是可以直接点击安装好的应用直接运行&#xff0c;给使网站访问缩短路径及增加网站的曝光度。 其中有一个问题就是需要生…
阅读更多...
各种浏览器缓存浅析

各种浏览器缓存浅析

前言 目前浏览器的缓存类型众多&#xff0c;HTTP Cache、Disk Cache、Memory Cache、ServiceWorker Cache、Push Cache 等等&#xff0c;这些缓存是如何产生的&#xff1f;命中优先级是怎么样&#xff1f;又该如何去使用它们&#xff1f; Disk Cache、Memory Cache Disk Cac…
阅读更多...
[工具]TS 视频合并工具

[工具]TS 视频合并工具

简介 当下载 m3u8 资源时&#xff0c;通常产生的是多个 ts 视频文件&#xff0c;所以需要借助某些工具来将这些 ts 视频片段整合为一个视频文件。 本软件主要解决的就是这个问题&#xff0c;底层基于ffmpeg&#xff0c;可正常运行在 Windows 和 Mac 平台。不仅可以合并 ts 为单…
阅读更多...
[会议分享]2020全球软件大会分享-PWA在项目中的最佳实践

[会议分享]2020全球软件大会分享-PWA在项目中的最佳实践

大会地址&#xff1a;https://www.bagevent.com/event/1233659# PPT下载&#xff1a;https://download.csdn.net/download/lecepin/12871373
阅读更多...
「浏览器插件」非常好用的JSON-View

「浏览器插件」非常好用的JSON-View

Chrome 商店&#xff1a;地址 下载地址&#xff1a;地址 Github&#xff1a;https://github.com/lecepin/lp-json-view 查看/格式化 二合一。 功能 自动识别 JSON 内容&#xff0c;并在页面右下角创建切换按钮。支持展开/折叠节点。支持全部展开、全部折叠、展开一二三层节点…
阅读更多...
Github Action 快速构建 Electron 应用

Github Action 快速构建 Electron 应用

前言 在开发 Electron 应用时&#xff0c;比较耗时的部分应该是构建打包的过程&#xff0c;像用 electron-builder 这种打包工具来说&#xff0c;它会根据你要打包的系统来下载应用的系统镜像打包工具&#xff0c;由于这些镜像的源文件托管在 Github 上&#xff0c;且 nodejs …
阅读更多...
「浏览器插件」网址小尾巴终结者

「浏览器插件」网址小尾巴终结者

前言 在我们日常的开发调试中&#xff0c;会在 URL 上添加一些特殊的小尾巴 用来显示调试界面或者开启一些特殊功能&#xff0c;当你接触了越来越多的系统后&#xff0c;你需要使用的小尾巴就变得越来越多&#xff0c;记忆和使用成本非常大&#xff0c;以及含有小尾巴的网址 在…
阅读更多...
什么是低代码？

什么是低代码？

低代码 是一种软件开发方法&#xff0c;可以减少手工编码的过程&#xff0c;尽可能快的交付应用程序。 低代码平台 是工具的合集&#xff0c;这些工具可以通过建模和图形界面来进行应用程序的可视化开发。低代码使开发人员可以跳过手工编码&#xff0c;从而加快了应用程序的开…
阅读更多...
什么是 LOW-CODE ?

什么是 LOW-CODE ?

低代码平台的特征 可视化建模工具 使用可视化方法和模型创建应用程序比使用代码进行开发要快。具有可视化建模功能的低代码平台&#xff0c;使用内置的组件&#xff0c;以任何人都可读的形式表示任何信息&#xff0c;从没有技术技能的常规企业用户到专业开发人员。 开箱即用…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023