前面的话

  本文将详细介绍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. Java多线程(五)——线程等待与唤醒

    一.wait().notify().notifyAll()等方法介绍 在Object.java中,定义了wait(), notify()和notifyAll()等接口.wait()的作用是让当前线程进 ...

  2. Linux死锁检测-Lockdep

    关键词:LockDep.spinlock.mutex. lockdep是内核提供协助发现死锁问题的功能. 本文首先介绍何为lockdep,然后如何在内核使能lockdep,并简单分析内核lockdep ...

  3. 记一次项目上线后Log4j2不输出日志的坑

        公司项目采用了Log4j2来输出日志,在开发环境和测试环境下均可以输出日志,但在生成环境就没有日志输出.开始毫无头绪,后来通过不断的排查,终于解决了这个问题.在此记录下该问题的解决过程,便于后 ...

  4. IT面试技巧终身受益

    面试前的准备 首先我们要穿的得体,因为第一印象对一个面试官来说真的很重要,如果我们面试的时候都不能以一种非常认真的态度去对待,那么可想而知其实我们离面试成功的路渐行渐远,当然这只是说第一印象,并不能代 ...

  5. Codeforces Round #534 (Div. 2)D. Game with modulo-1104-D(交互+二分+构造)

    D. Game with modulo time limit per test 1 second memory limit per test 256 megabytes input standard ...

  6. c#中用sql存储过程

    string connstr = ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionStri ...

  7. 容器化 — 基于Docker技术容器云

    导读:本文介绍了基于Docker技术的企业级应用容器平台,从云的定义.云服务分类,到用友云PaaS基础平台.平台总体架构.架构预览.部署架构.平台核心价值和核心竞争力,阐述PaaS基础平台成为广大传统 ...

  8. Java基础之一反射

    反射是框架设计的灵魂 (使用的前提条件:必须先得到代表的字节码的Class,Class类用于表示.class文件(字节码))   一.反射的概述 JAVA反射机制是在运行状态中,对于任意一个类,都能够 ...

  9. jmeter分布式压测(多台电脑一起压测)

    (1)在Windows下运行 操作步骤: 1)     有多台电脑,每台电脑上都有jmeter,而且这几台电脑都互相能ping通. 2)     在我的电脑的jmeter的配置文件bin目录下的jme ...

  10. shell脚本--初识CGI

    CGI按照百度百科的定义,如下: CGI 是Web 服务器运行时外部程序的规范,按CGI 编写的程序可以扩展服务器功能.CGI 应用程序能与浏览器进行交互,还可通过数据库API 与数据库服务器等外部数 ...