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. mybatis（六）：设计模式 - 适配器模式

  2. js splice()

    //arrayObject.splice(index,howmany,item1,.....,itemX) 语法 //测试代码let array;array = ['George','John','T ...

  3. 1025 PAT Ranking (25分)

    1025 PAT Ranking (25分) 1. 题目 2. 思路 设置结构体, 先对每一个local排序,再整合后排序 3. 注意点 整体排序时注意如果分数相同的情况下还要按照编号排序 4. 代码 ...

  4. 环境配置 | Pycharm远程开发的环境配置

    目的:同局域网中的两台电脑,Mac上看视频学习编程 + 当服务器跑代码:Windows上使用Pycharm写代码.学习远程开发 (当前底子有限,很多操作可能存在理解偏差) Mac上代码存放路径:~/O ...

  5. LED Magic Light - How Does The LED Light Change Color?

    The    LED Magic Light    states that the color-changing LED is not an LED in the package, but three ...

  6. 各技能DBC参数

    推荐你  通过 引擎的帮助文件查找标准魔法DB 下面是 部分hero引擎的标准魔法DB 34,解毒术,2,26,16,0,0,0,0,0,2,42,50,44,100,46,200,40,, 35,老 ...

  7. JS高级---新内容课程介绍

    重点: 原型链 重点:不同的继承 原型的另一个作用 重点:this指向要知道到底是谁   复习原型 原型链 原型的指向是否可以改变 继承 如何实现继承 原型的方式继承 借用构造函数继承 组合继承 拷贝 ...

  8. jQuery 源码解析(三十) 动画模块 $.animate()详解

    jQuery的动画模块提供了包括隐藏显示动画.渐显渐隐动画.滑入划出动画,同时还支持构造复杂自定义动画,动画模块用到了之前讲解过的很多其它很多模块,例如队列.事件等等, $.animate()的用法如 ...

  9. mongo日常命令集锦

    查询某个字段是否存在 db.student.findOne({name:{$exists:true}}) db.student.findOne({'department.name':{$exists: ...

  10. C++转换构造函数和隐式转换函数

    今天是第一次听到C++还有个转换构造函数,之前经常见到默认构造函数.拷贝构造函数.析构函数,但是从没听说过转换构造函数,隐式转换函数也是一样,C++的确是够博大精深的,再次叹服!          其 ...