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. 数位dp（Balanced Numbers ）

    题意:一个数,如果满足奇数的数字出现偶数次,偶数的数字出现奇数次, 就是符合的数,注比如:12313  就满足,因为1 3出现了偶数次.2出现了奇数次 思路,对于这道题,就是状态压缩加dp: 对于一个 ...

  2. 云原生学习笔记（3）——Kubernetes基本概念

    学习地址:https://developer.aliyun.com/lesson_1651_13078?spm=5176.270689.1397405.6.716ef5f8Q9z1z3#_13078 ...

  3. Iris路由和路由组

    package main import ( "github.com/kataras/iris" "github.com/kataras/iris/context" ...

  4. Pandas数据结构（一）——Pandas Series

    Pandas 是 Python 中基于Numpy构建的数据操纵和分析软件包,包含使数据分析工作变得快速简洁的高级数据结构和操作工具.通过Pandas Series 和 Pandas DataFrame ...

  5. 【转载】Hadoop自定义RecordReader

    转自:http://www.linuxidc.com/Linux/2012-04/57831.htm 系统默认的LineRecordReader是按照每行的偏移量做为map输出时的key值,每行的内容 ...

  6. 题解 P5530 [BalticOI 2002]双调路径

    P5530 [BalticOI 2002]双调路径 输入样例: 4 5 1 4 2 1 2 1 3 4 3 1 2 3 1 2 3 1 1 4 2 4 2 4 样例如下图 样例说明: 从1到4有4条路 ...

  7. bugku 矛盾 30

    首先打开网址链接会发现一串代码 然后进行分析代码的意思首先是一个函数查一下这个函数 然后会发现现代码第一句写的是输入数字,然后会发现第二行有一个感叹号意思是输入的如果不是数字则回复数字 如果输入数字则 ...

  8. 错误记录（一）：VSCode

    VS Code莫名其妙突然变卡. 后来重新安装,下载以前版本,设置防止循环,都不太管用. 最后想添加VS Code目录到windows扫描白名单,但因为系统之前是英文不太好看懂,所以又调回了中文. 这 ...

  9. APP测试用例

    日程管理APP测试用例 测试编号 测试用例 实际结果 期望结果 测试结果(Pass/Failed) 备注 NO.1 输入正确的用户名和密码点击登录 登录成功 登录成功 Pass NO.2 点击注册界面 ...

  10. 503,display:none;与visibility：hidden；的区别

    联系:他们都能让元素不可见 区别: display:none:会让元素从渲染树中消失,渲染的时候不占据任何空间: visibility:hidden:不会让元素从渲染树中消失,渲染时袁旭继续占据空间, ...