css实现仿四周内阴影盒子

有时图片需要内阴影效果但是用box-shadow会有模糊的感觉，下面是鼠标按下图片会有平滑清晰的内阴影效果

html部分

<ul><li><a href="#"><img src="img/x1.jpg" alt=""></a></li><li><a href="#"><img src="img/x2.jpg" alt=""></a></li><li><a href="#"><img src="img/x3.jpg" alt=""></a></li></ul>

css部分：

body {background-color: #333333;}ul {margin: 0 auto;padding: 0;list-style-type: none;width: 1010px;overflow: hidden;}ul li {float: left;margin: 0 10px;}ul li a {position: relative;display: block;}/* a标签有一个before，用它盖在a上面 */ul li a::before {content: '';/* 用来容纳块的计算公式 */position: absolute;top: 0;left: 0;bottom: 0;right: 0;}ul li:hover a::before {border: 10px solid rgba(255, 255, 255, .5);border-radius: 5px;}ul li img {display: block;border-radius: 5px;}

css实现仿四周内阴影盒子相关推荐

【CSS】解决图片和盒子底部产生的缝隙问题
[CSS]解决图片和盒子底部产生的缝隙问题好久没写CSS了,一般都是用的框架(CVCV),项目中遇到的一些问题记录一下问题如下: 解决办法:设置以下属性: vertical-align: top/ ...
html怎么实现聊天界面设计,纯css制作仿微信聊天页面
纯css制作仿微信聊天页面 *{ margin: 0; padding: 0; } body{ font-size: 14px; } .triangle{ margin: 100px auto ; w ...
CSS+JS仿QQ面板风格的多级折叠下拉菜单
<html><head><title>CSS+JS仿QQ面板风格的多级折叠下拉菜单丨石家庄玻璃隔断|石家庄自动门</title><style ty ...
JS+CSS打造仿QQ面板的三级折叠下拉菜单
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
HTML期末学生作业 HTML+CSS+JavaScript仿猫眼电影在线网站 Hbuilder网页制作
❤ HTML期末学生作业~html+css+javascript仿猫眼电影在线网站(功能齐全) web期末结课大作业 html+css+javascript网页.电影.仿京东.天猫.服装. 企业网站制 ...
CSS三大特性，初识盒子
CSS三大特性,初识盒子 CSS层叠性层叠性就是CSS处理冲突的一种能力. 层叠性只有在多个选择器选中"同一个标签", 然后又设置了"相同的属性", 才会发生 ...
css盒模型以及如何计算盒子的宽度
css盒模型以及如何计算盒子的宽度盒模型每个存在于可访问性树中的元素都会被浏览器绘制成一个盒子1. 每个盒子都可以看成由4部分组成,它们分别是 - 元素外边距(margin).元素边框(borde ...
【HTML+CSS】仿网易云音乐网站
[HTML+CSS]仿网易云音乐网站
初学者之CSS学习（六）盒子模型
<html> <head> <meta charset="utf-8"/> <title>盒子模型</title> &l ...

css实现仿四周内阴影盒子

css实现仿四周内阴影盒子相关推荐

最新文章

热门文章