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. windows7安装 npm和cnpm

    1.node.js下载地址: https://nodejs.org/en/download/ 我选择的安装路径是D:\files\nodejs 2.查看安装是否成功 3.创建文件夹 在D:\files ...

  2. 【转】Git常用命令指南

    1.git init 初始化一个Git仓库,git init –bare example.git创建一个裸仓,即没有工作区的git仓库.2.添加文件到Git仓库,分两步:git add <fil ...

  3. 同步异步IO，阻塞非阻塞

    同步异步 同步IO操作:导致请求进程阻塞,知道IO操作完成. 异步IO操作:不导致进程阻塞. 在处理(网络) IO 的时候,阻塞和非阻塞都是同步IO, 阻塞,就是调用我(函数),我(函数)没有接收完数 ...

  4. 调用百度地图api隐藏版权信息

    调用百度地图API隐藏右下角版权信息 商用的话建议不要隐藏,避免侵权. 隐藏前: 隐藏后: .BMap_cpyCtrl { display: none; } .anchorBL { display: ...

  5. 微信小程序 （组件的使用）

    创建组件 在根目录创建components目录,然后创建列表组件 组件中内容 <view class="prolist"> //循环prolist列表 <view ...

  6. mysql yum 卸载取消开机自启动

    查询安装的yum源rpm -qa | grep -i mysql 使用yum remove卸载 yum remove 刚才过滤出来的包一个个来 剩下卸载不了使用 rpm -e --nodeps: rp ...

  7. 普及C组第一题（8.9）

    2297. [noip普及组2(放到第一题)]棋盘 (好像重名了)(File IO): input:chess.in output:chess.out 题目描述 众所周知,国际象棋的棋盘是一个网格.国 ...

  8. Django组件总结

    Django组件介绍 分页器的使用 分页器在页面中非常常见,当数据库条数数据过多时,页面一次性显示不好看时,我们可以使用分页器,将数据分几次显示. 1.1 数据库内插入大量数据 Booklist=[] ...

  9. nginx配置指令auth_basic、auth_basic_user_file及相关知识

    参考链接 https://www.jianshu.com/p/1c0691c9ad3c auth_basic_user_file 所需要的密码,可以通过如下方法生成 1)安装htpasswd (yum ...

  10. P&R 2

    Floorplan: 要做好floorplan需要掌握哪些知识跟技能? 通常,遇到floorplan问题,大致的debug步骤跟方法有哪些? 如何衡量floorplan的QA? Floorplan是后 ...