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. 第四十六篇 入门机器学习——kNN - k近邻算法（k-Nearest Neighbors）

    No.1. k-近邻算法的特点 No.2. 准备工作,导入类库,准备测试数据 No.3. 构建训练集 No.4. 简单查看一下训练数据集大概是什么样子,借助散点图 No.5. kNN算法的目的是,假如 ...

  2. Codeforces Round #598 (Div. 3) B Minimize the Permutation

    B. Minimize the Permutation You are given a permutation of length nn. Recall that the permutation is ...

  3. [git] git合并冲突 本地已有项目上传 各种问题

    git... 讲道理 我现在能隐约感觉到他的强大控制能力了 但是依旧是不习惯.... 无论是什么操作 在我这里都会出问题,,,, 上传本地已有的项目到码云 首先需要现在码云创建一个仓库 然后用git工 ...

  4. Atcoder Beginner Contest 155D（二分，尺取法，细节模拟）

    二分,尺取法,细节模拟,尤其是要注意a[i]被计算到和a[i]成对的a[j]里时 #define HAVE_STRUCT_TIMESPEC #include<bits/stdc++.h> ...

  5. 如何更改已经pushed的commit的注释信息（How to change the pushed commit message）

    1, 修改最后一次注释(Modify the last comment message) git commit -amend 2,修改之前的注释 1)输入: git rebase -i HEAD~3 ...

  6. IntelliJ IDEA之如何设置JVM运行参数

    步骤一: 点击IDEA右上角的 Edit Configurations 设置参数: -XX:+PrintGCDetails -Xmx128M -Xms128M 步骤二:在VM options中设置参数 ...

  7. Js将字符串转换成对象或数组en

    举个例子 var test='{ colkey: "col", colsinfo: "NameList" }' a.将文本转换成对象 var test='{ c ...

  8. Qt核心剖析：信息隐藏

    原文 http://devbean.blog.51cto.com/448512/326686 (一) 如果你阅读了 Qt 的源代码,你会看到一堆奇奇怪怪的宏,例如 Q_D,Q_Q.我们的Qt源码之旅就 ...

  9. HBO《硅谷》中的二进制码

    先反思一下……这两天感觉除了coding,没有很好地去学习专业课.心神不定 于是,就想看下硅谷,来提升一下自己的coding执行力…… 然后,我就在看剧的时候,看到了这么一张图:‘ 然后嘛…… 我就想 ...

  10. Hello 2020D（多重集）

    如果有一对时间对在某一场馆有时间重合而这一对时间对在另一场馆没有时间重合,则输出NO,否则输出YES. #define HAVE_STRUCT_TIMESPEC #include<bits/st ...