前面的话

  本文将详细介绍CSS边框效果

半透明边框

  border:10px solid hsla(0, 0%, 100%,.5);
background-clip:padding-box;

缝边效果

  outline: 1px white dashed;
outline-offset:-10px;
border-radius:4%;
background:#795548;

边框内圆角

  思路如下:为元素设置圆角,外层设置轮廓outline。圆角与直角之间的空隙用阴影补齐,阴影的尺寸为圆角半径的一半

  border-radius:10px;
background: tan;
outline:10px solid #655;
box-shadow:0 0 0 5px #655;

信封边框

  信封边框有两种实现思路:

  1、使用背景渐变

  padding:1em;
border: 1em solid transparent;
background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, red 0, red 12.5%, transparent 0, transparent 25%, #58a 0, #58a 37.5%, transparent 0, transparent 50%) 0/5em 5em;

  2、使用边框图片

  padding:1em;
border: 1em solid transparent;
border-image:repeating-linear-gradient(-45deg, red 0, red 1em, transparent 0, transparent 2em, #58a 0, #58a 3em, transparent 0, transparent 4em) 16;

  效果如下

脚注效果

  由于使用了currentColor,它会根据color属性的变化而自动适应

  padding-top:1em;
border-top: .2em solid transparent;
border-image: 100% 0 0 linear-gradient(90deg,currentColor 4em,transparent 0);

蚂蚁线

@keyframes ants{100%{background-position:100%;}}
div{
width:200px;
height: 70px;
border: 1px solid transparent;
background: linear-gradient(white,white) padding-box,repeating-linear-gradient(-45deg, black 0, black 25%, white 0, white 50%) 0/.6em .6em;
animation:ants 12s linear infinite;
}

CSS边框效果的更多相关文章

  1. css 使用background背景实现border边框效果

    css中,我们一般使用border给html元素设置边框,但也可以使用background背景来模拟css边框效果,本文章向大家介绍css 使用background背景实现border边框效果,需要的 ...

  2. CSS属性定义 文本修饰 边框效果 背景修饰

    一.CSS属性定义1.css颜色表示方法[重点]rgb(红绿蓝3个颜色通道 强度值为0-255)rgb(0,0,0)rgba(alpha a是透明度 值为0-1)rgba(123,123,123,0) ...

  3. CSS鼠标悬停图片加边框效果,不位移的方法

    <!DOCTYPE HTML> <html lang="en-US"> <head> <title>css实现鼠标悬停时图片加边框效 ...

  4. css的img移上去边框效果及CSS透明度

    css的img移上去边框效果: .v_comment img{ height:36px; height:36px; float:left; padding:1px; margin:2px; borde ...

  5. CSS 边框 阴影 效果

    CSS 边框 阴影 效果 以下将css实现阴影效果,以便须要朋友们,直接上代码 #shadow1{ width: 200px; height: 100px; color: white; backgro ...

  6. CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法

    CSS鼠标悬停图片加边框效果,页面布局发生错位的解决办法 .recomend-list{ width:1200px; a{ @extend %fl; margin-right: 30px; width ...

  7. 理解CSS边框border

    前面的话   边框是CSS盒模型属性中默默无闻的一个普通属性,CSS3的到来,但得边框属性重新焕发了光彩.本文将详细介绍CSS边框 基础样式   边框是一条以空格分隔的集合样式,包括边框粗细(边框宽度 ...

  8. 赞!15个来自 CodePen 的酷炫 CSS 动画效果

    CodePen 是一个在线的前端代码编辑和展示网站,能够编写代码并即时预览效果.你在上面可以在线分享自己的 Web 作品,也可以欣赏到世界各地的优秀开发者在网页中实现的各种令人惊奇的效果. 今天这篇文 ...

  9. 第 17 章 CSS 边框与背景[下]

    学习要点: 1.设置背景 主讲教师:李炎恢 本章主要探讨 HTML5 中 CSS 边框和背景,通过边框和背景的样式设置,给元素增加更丰富的外观. 一.设置背景 盒模型的尺寸可以通过两种方式实现可见性, ...

随机推荐

  1. springboot配置文件中使用当前配置的变量

    在开发中,有时我们的application.properties某些值需要重复使用,比如配置redis和数据库或者mongodb连接地址,日志,文件上传地址等,且这些地址如果都是相同或者父路径是相同的 ...

  2. 【LOJ 2004】「SDOI2017」硬币游戏

    LOJ 2004 100pts 首先我们肯定要建AC自动机的.. 那么这题就肯定是个AC自动机上\(dp\). 所以想想状态. 首先如果我们把状态设成这样行不行: \(dp(i)\)表示匹配到了i节点 ...

  3. ExFilePicker的使用 — 获取本地图片资源并用RecyclerView展示出来

    代码其实很简单,所以就不多进行文字说明,直接上完整的代码: 第一步:在app/build.gradle添加需要使用到的依赖库:(这里对引用的版本冲突问题作了处理,详情请看链接:https://www. ...

  4. python:利用xlrd模块操作excel

    在自动化测试过程中,对测试数据的管理和维护是一个不可忽视的点.一般来说,如果测试用例数据不是太多的话,使用excel管理测试数据是个相对来说不错的选择. 这篇博客,介绍下如何利用python的xlrd ...

  5. Kano模型告诉你“是不是只要企业努力的提高产品或服务质量,顾客满意度就一定会提高吗?”

    在 PO在敏捷需求下要遵守哪6条重要原则?   中讲到探索和交付两大阶段的6个原则 其中在原则[做有价值的需求]中讲了两个方法:BSA分析和产品Backlog 其中BSA分析是我在产品规划阶段常使用的 ...

  6. HBuilder使用夜神模拟器调试Android应用

    由于HBuilder的扫描机制无法直接连上夜神模拟器.我搞了好久终于找到办法了,分享给大家. 首先,启动HBuilder和夜神模拟器 然后打开cmd命令提示符 cd进入夜神模拟器bin目录 执行以下命 ...

  7. Nginx服务器的使用与反向代理负载均衡

    目录 Nginx服务器 一:什么是Nginx? 什么是Nginx - Nginx与其他服努器的性能比较 二:如何在Linux中搭建Nginx服务器? 常见的错误 三:Nginx的反向代理和负载均衡 什 ...

  8. SpringBoot如何使用拦截器

    1.配置拦截器 @Configuration public class WebMvcConfigurer extends WebMvcConfigurerAdapter { @Override pub ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统(92)-打印EasyUI 的datagrid表格

    前言 应用系统有时候需要打印Datagrid的表格内容,我们本节就来学习打印datagrid内容 打印主要使用:web打印(我们之前有讲过web打印插件jqprint) + 将datagrid重新编制 ...

  10. 十五、bootstrap-select的使用方法

    参考来源https://www.cnblogs.com/nianyifenzhizuo/p/8119462.html 需要的css和js <link rel="stylesheet&q ...