1.

box-shadow:0 0 0 1px #feaa9e,0 0 0 5px #fd696f

2.

border:1px solid #feaa9e;

outline:5px solid #fd696f;

用纯css实现双边框效果的更多相关文章

  1. 纯css实现星级评分效果

    效果 效果图如下,纯css实现超酷炫的星级评分动画效果 ​ 实现思路 5个类型为radio的input,label标签修改样式背景图为星星 label标签给每个星星鼠标停留时加注名字 点击星星有放大旋 ...

  2. 不可思议的纯 CSS 实现鼠标跟随效果

    直接进入正题,鼠标跟随,顾名思义,就是元素会跟随着鼠标的移动而作出相应的运动.大概类似于这样: 通常而言,CSS 负责表现,JavaScript 负责行为.而鼠标跟随这种效果属于行为,要实现通常都需要 ...

  3. 不可思议的纯 CSS 滚动进度条效果

    结论先行,如何使用 CSS 实现下述滚动条效果? 就是顶部黄色的滚动进度条,随着页面的滚动进度而变化长短. 在继续阅读下文之前,你可以先缓一缓.尝试思考一下上面的效果或者动手尝试一下,不借助 JS , ...

  4. 纯css实现翻书效果

    前言 最近研究了一下css3的3D效果,写了几个demo,写篇博客总结一下实现的经过.PS:如果对transform-origin/perspective/transform-style这些概念还不了 ...

  5. 纯CSS焦点轮播效果-功能可扩展

    个人博客: http://mcchen.club 纯CSS3实现模拟焦点轮播效果,支持JQ等扩展各项功能.废话少说,直接贴代码. <!DOCTYPE html> <html> ...

  6. css之纯css实现流程导航效果

    :::tip 使用纯css线上 流程导航效果.     本文统一采取 flex 布局 ,你也可以采用其他布局实现,核心原理不变 ::: ## 方法一 利用裁剪  该方法IE下不支持 利用裁剪 clip ...

  7. 纯CSS实现3D按钮效果

    今天分享一个用纯CSS实现的3D按钮.css巧妙利用了box-shadow来实现3D物体的立体感,当按钮按下的时候再去修改box-shadow和top值.让人感觉有一种按钮被按下的感觉.css代码非常 ...

  8. HTML5 CSS3专题 纯CSS打造相冊效果

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/30993277 今天偶然发现电脑里面还有这种一个样例.感觉效果还不错,不记得啥时候 ...

  9. 纯css实现照片墙3D效果

    每张照片都有美丽的故事.美好的回忆.家居中的照片墙则帮你展现出这些承载着家庭重要记忆的照片,除了用画框装饰照片挂在墙上外,照片墙还可以演变为手绘照片墙.也经常在网上看到一些关于照片墙的特效案例,决定自 ...

随机推荐

  1. 部署web应用程序到tomcat

    昨天将一个web项目部署到本地的tomcat,历程很艰辛,各种报错.首先这个项目可以用eclipse内嵌的jetty启动起来,试着用tomcat容器,各种报错.以下是详细步骤: 1.用eclipse打 ...

  2. 什么是nuget？nuget包是如何管理

    本文链接:https://blog.csdn.net/Microsoft_Mao/article/details/101159800做windows开发的,迟早会接触到nuget这个东西,那么今天我们 ...

  3. Flink架构（五）- 检查点，保存点，与状态恢复

    检查点,保存点,与状态恢复 Flink是一个分布式数据处理系统,这种场景下,它需要处理各种异常,例如进程终止.机器故障.网络中断等.因为tasks在本地维护它们的state,Flink必须确保在出现故 ...

  4. [lua]紫猫lua教程-命令宝典-L1-01-11. lua的个人补充

    1.关于三目运算符的一些补充和纠正 前面没看仔细  a>b ? a: b 这个形式 似乎lua下并不存在...要了命 一般都是使用  a and b or c 的形式 但是这种形式存在一些问题 ...

  5. Linux中通配符

    通配符是由shell处理的, 它只会出现在 命令的“参数”里.当shell在“参数”中遇到了通配符时,shell会将其当作路径或文件名去在磁盘上搜寻可能的匹配:若符合要求的匹配存在,则进行代换(路径扩 ...

  6. CSS和JS两种颜色渐变文字效果代码

    js实现颜色渐变文字效果代码: <!-- js颜色渐变色文字 --> <div id="moml"> <div style="text-al ...

  7. Integer.parseInt(s)、Integer.valueOf(s)与new Integer()的异同

    我们在开发过程中,很多时候需要将String类型数据转换成Integer,而比较常用的方式就是--nteger.parseInt(s).Integer.valueOf(s)与new Integer() ...

  8. 随机获取list或set或map中的一个元素

    转自:https://m.2cto.com/kf/201507/412937.html import java.util.HashSet;import java.util.List;import ja ...

  9. Java日期时间API系列21-----Jdk8中java.time包中的新的日期时间API类，xk-time时间转换，计算，格式化，解析的工具

    通过工作之余,对Java8中java.time包源码的不断学习,使用和总结,开发了xk-time,初步完成,欢迎试用和提出建议! xk-time xk-time is a datetime conve ...

  10. [Fiddler学习] - Mock的简单实现原理及方法

    最近在研究Fidder抓包并做一点测试工作,下面介绍一下Fiddler的实现原理: 简单来说从clent,server端发出来的请求,都需要通过Fiddler进行代理走一遍.如果有任何请求需要做修改, ...