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. 801. 二进制中1的个数（lowbit（n）函数）

    给定一个长度为n的数列,请你求出数列中每个数的二进制表示中1的个数. 输入格式 第一行包含整数n. 第二行包含n个整数,表示整个数列. 输出格式 共一行,包含n个整数,其中的第 i 个数表示数列中的第 ...

  2. 每天进步一点点------Allegro 手工布线时控制面板各选项说明

    在进行手工布线过程中,最重要的就是对控制面板中的各个选项进行设置,因此首先介绍控制面板中各个选项的含义. 手工布线的命令为Route->connect,执行命令后,右侧控制面板如图8.14所示. ...

  3. 《E＝MC2或一个思想的故事》

    思想是起点.一切行动都以萌芽状态孕藏在思想之中,以往所做过的一切均离不开思想. 他是个纯朴的人,喜欢在乡下静静地冥想. .而科学家们却非常清楚,那些最伟大的成就都是在静默中完成的.

  4. 【vue store的使用方法】（this.$store.state this.$store.getters this.$store.dispatch this.$store.commit）

    vue 页面文件 <template> <div> {{this.$store.state.count}}<br/> {{count}}<br/> {{ ...

  5. Flask 教程 第十八章：Heroku上的部署

    本文翻译自The Flask Mega-Tutorial Part XVIII: Deployment on Heroku 这是Flask Mega-Tutorial系列的第十八部分,我将在其中部署M ...

  6. python测量代码运行时间方法

    Python 社区有句俗语: “python自己带着电池” ,别自己写计时框架. Python3.2具备一个叫做 timeit 的完美计时工具可以测量python代码的运行时间. timeit 模块: ...

  7. Ubuntu16.04安装TORCS

    下载torch安装包: git clone https://github.com/torch/distro.git torch --recursive 安装依赖库: cd torch/ sudo ba ...

  8. python开发基础04-列表、元组、字典操作练习

    练习1: # l1 = [11,22,33]# l2 = [22,33,44]# a. 获取内容相同的元素列表# b. 获取 l1 中有, l2 中没有的元素列表# c. 获取 l2 中有, l1 中 ...

  9. Mysql查看连接数（连接总数、活跃数、最大并发数）

    show variables like '%max_connection%'; set global max_connections=1000;

  10. 微信小程序UDP通信，注意点 接收 onMessage 收到的message是ArrayBuffer缓冲，不能直接输出，要另转String处理

    1.WXML 页面代码 <!--index.wxml--> <view class="container"> <view class="us ...