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. dijkstra堆优化板子

    咕咕咕. #include<queue> #include<cstdio> #include<cstring> #include<algorithm> ...

  2. JSON对比XML

    相同点 纯文本 具有“自我描述性”(人类可读) 具有层级结构 可通过JavaScript解析 数据可使用AJAX传输 不同点 没有结束标签 更短 读写速度更快 能够使用内建的JavaScript ev ...

  3. Redis 配置文件杂项。

    protected-mode -----------------保护模式 redis3.2版本后新增protected-mode配置,默认是yes,即开启.设置外部网络连接redis服务,设置方式如下 ...

  4. monkey工具使用（未完待续）

    monkey命令详解: 转自:http://blog.csdn.net/jlminghui/article/details/38238443 http://www.cnblogs.com/wfh198 ...

  5. AS常用快捷键

    Alt+回车 导入包,自动修正 Ctrl+N 查找类 Ctrl+Shift+N 查找文件 Ctrl+Alt+L 格式化代码 Ctrl+Alt+O 优化导入的类和包 Alt+Insert 生成代码(如g ...

  6. KALI修改密码

    许久不用的Kali,某天打开竟忘了密码! 网上的方法颇为简单,遂准备亲自试一下. #光标移动到第二行的“恢复模式”,按E进入[编辑模式]       #进入编辑模式,鼠标是不可操作的,用方向键往下面翻 ...

  7. bugku 宽带信息泄露

    首先下载文件 下载完成后发现是一个后缀名为 bin 的文件 然后找百度查一下这是什么文件的后缀名 看一下题目 然后用软件routerpassview打开(搜的教程) 然后打开文件 搜索username ...

  8. sublime3使用技巧

    1.鼠标悬浮,显示文件引用 Preference ——>   Settings   ——>    "index_files": true   (保存,重新打开即可) 2 ...

  9. Codeforces Round #618 (Div. 1)C（贪心）

    把所有数看作N块,后面的块比前面的块小的话就合并,这个过程可能会有很多次,因为后面合并后会把前面的块均摊地更小,可能会影响更前面地块,像是多米诺骨牌效应,从后向前推 #define HAVE_STRU ...

  10. 【Python】一些函数

    Python 数字类型转换 有时候,我们需要对数据内置的类型进行转换,数据类型的转换,你只需要将数据类型作为函数名即可. int(x) 将x转换为一个整数. float(x) 将x转换到一个浮点数. ...