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. 字符串判空有空格报错：binary operator expected

    使用-z或-n对一个变量判空时,需要注意若直接使用[ -n ${ARG} ]这种形式,若${ARG}中有空格将会报错, #!/bin/bash ARG="sd dd" if [ - ...

  2. Go反射

    一.引入 不同语言的反射模型不尽相同,有些语言还不支持反射.<Go 语言圣经>中是这样定义反射的: Go 语言提供了一种机制在运行时更新变量和检查它们的值.调用它们的方法,但是在编译时并不 ...

  3. linux中systemctl详细理解及常用命令

    linux中systemctl详细理解及常用命令 https://blog.csdn.net/skh2015java/article/details/94012643 一.systemctl理解 Li ...

  4. 解析python 生产/消费者模型实现过程

    1.多线程实现 import threadingimport queueimport logginglogging.basicConfig(level = logging.INFO,format = ...

  5. noobSTL-1-配置器-0

    noobSTL-1-配置器-0 0.前言 STL的配置器(allocator),也叫内存分配器,负责空间配置与管理,简单地说,就是负责管理内存的. 从实现的角度来看,配置器是一个实现了动态空间配置.空 ...

  6. python lib timeit 测试运行时间

    目录 1. 简介 1.1. python interface 2. 案例 2.1. timeit() /repeat() 2.2. timer() 1. 简介 27.5. timeit - Measu ...

  7. python 网页中文显示Unicode码

    print repr(a).decode("unicode–escape") 注:a是要输出的结果,

  8. 046_使用Scanner获得键盘输入 047_控制语句介绍 048_控制语句_if单选择结构 049_ifelse双选择结构 050_ifelseifelse多选择结构

    046_使用Scanner获得键盘输入 package test_package;import java.util.Scanner;/** * 测试获得键盘输入 * @author * */publi ...

  9. shim是什么？

    Vue响应式原理中说道:Object.defineProperty是Es5中无法shim的特性,那么这里的shim是什么呢? shim可以将新的API引入到旧的环境中,而且仅靠就环境中已有的手段实现. ...

  10. 字符串类型：char,varchar,text,enum,set

    字符串类型 1.char 格式:char (M) 2.varchar 格式:varchar (M) [注意]M表示允许的字符串长度[65535].M表示的是字符数,而不是字节数.但是最大长度的使用是按 ...