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. Flink系统配置

    Flink 系统配置 Flink 提供了多个配置参数,用于调整Flink的行为与性能,所有参数均在flink-config.yaml 文件中.下面我们介绍一下几个主要配置. Java and Clas ...

  2. JavaWeb——第1章Web技术概述

    Web本意是蜘蛛网的意思,现常指Internet的Web技术.Web技术提供了方便的信息发布和交流方式,是一种典型的分布式应用结构,Web应用中的每一次信息交换都要涉及客户端和服务器. 一.Inter ...

  3. HTML学习（7）格式化标签

    对文本格式进行编辑的标签.常用: <b>加粗文本</b> <strong>加重语气</strong>   与<b>效果一样,<stro ...

  4. 每天进步一点点------ORCAD Capture CIS 快捷键

                   ORCAD Capture CIS 快捷键 I: 放大O: 缩小C: 以光标所指为新的窗口显示中心 W: 画线On/OffP: 快速放置元件R: 元件旋转90°H: 元件 ...

  5. 迎娶白富美，走上人生巅峰（python爬虫股票分析）

    一.姿势储备 股票交易,线性代数(分析股票),分位数(风险评估)... finace.yahoo.com 雅虎提供几乎所有股票api www.kaggle.com  有问题找社区 未完待续.....

  6. ABB工业机器人(条件执行数字信号判断，画方or画圆)

    一.前戏 条件:从安全点,到工具区域夹取工具(笔),到工作区域,判断数字信号 Di1 =1 ,Ture :画方,False:画圆,回到工具区域放下工具(笔),回到安全点 二. 准备工作 校准tcp工具 ...

  7. HTTP头部字段总结【转】

    原作者: 留七七, 地址:http://www.jianshu.com/p/6e86903d74f7 一.常用标准请求头字段 Accept  设置接受的内容类型 Accept-Charset    设 ...

  8. php自制工具函数，常用的函数集合

    字符串与爬虫相关 1,解析url /** * 模拟访问,可get可post * @param $curl * @param $postInfo post数组/字符串,不填默认没有post * @par ...

  9. Bugku-CTF加密篇之来自宇宙的信号（银河战队出击）

    来自宇宙的信号 银河战队出击 flag格式 flag{字母小写}    

  10. Django视图层、模板层

    过滤器方法 upper 大写方式输出 add 给value加上一个数值 capfirst 第一个字母大写 center 输出指定长度的字符串,把变量居中 cut 删除指定字符串 date 格式化日期 ...