box-shade和border-radius在定位与未定位对象中的使用
来源:互联网 发布:非交互式的域名备案 编辑:程序博客网 时间:2024/06/07 12:03
box-shade以及border-radius这些css3属性大家肯定不陌生,在此为那些对于box-shade和border-radius还不太熟悉的小白提出一些值得注意的地方,这些值得注意的地方在大家使用过程中肯定遇到过。好了,话不多说,直接正题。
为什么会把这两个拿在一起说,后面会讲到。
先说box-shade:
X-offset:阴影水平偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;
Y-offset:阴影垂直偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;
阴影半径:此参数可选,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;
阴影尺寸:此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;
再来说说border-radius:
margin: 200px auto;
}
.box{
border-radius: 50%;
border: 1px solid #f00;
text-align: center;
overflow: hidden;
box-shadow: inset 0 0 20px rgba(255,255,255,0.6);
}
.box img{
max-width: 100%;
border-radius: 50%;
vertical-align: middle;
}
<div class="col-md-4">
<div class="box">
<img src="img/psb.jpg"/>
</div>
</div>
<div class="col-md-4">
<div class="box">
<img src="img/psb.jpg"/>
</div>
</div>
<div class="col-md-4">
<div class="box">
<img src="img/psb.jpg"/>
</div>
</div>
</div>
会发现不给具体宽高的元素使用border-radius无效,而且box-shade也无法显示出来(被图片挡住)。因为需要响应
式(不使用媒体查询的情况下)给具体高度不能达到响应式该有的效果。
那该怎么又能实现响应式又能让border-radius和box-shade都生效呢!那就给具体宽高,使border-radius生效;使用
媒体查询实现响应式。
.row{
margin: 200px auto;
}
.col-md-4{
position: relative;
}
.box{
border-radius: 50%;
border: 1px solid #f00;
text-align: center;
overflow: hidden;
box-shadow: inset 0 0 50px rgba(255,255,255,0.6);
position: absolute;
left: 0;
top: 0;
z-index: 2;
}
img{
max-width: 100%;
border-radius: 50%;
vertical-align: middle;
position: absolute;
left: 0;
top: 0;
z-index: 1;
}
@media only screen and (min-width: 992px){
.box,img{
width: 300px;
height: 300px;
}
}
@media only screen and (min-width: 768px) and (max-width: 991px) {
.box,img{
width: 495px;
height: 495px;
}
}
<div class="row">
<div class="col-md-4 col-sm-6">
<div class="box">
</div>
<img src="img/psb.jpg"/>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
</div>
<img src="img/psb.jpg"/>
</div>
<div class="col-md-4 col-sm-6">
<div class="box">
</div>
<img src="img/psb.jpg"/>
</div>
</div>
效果图:
这样就达到了想要达到的效果,使用定位和层级是为了实现box-shade;给具体宽高是实现border-radius;使用媒体查询实现响应式。值得注意的是,层级需要和定位一起使用才会生效,而且需要在同一级之间使用层级。
- box-shade和border-radius在定位与未定位对象中的使用
- box-shadow使用, border-radius使用
- HTML5实践 -- 介绍css3中的几个属性:text-shadow、box-shadow 和 border-radius
- border-radius 和 box-shadow前加-moz和-webkit
- border-radius和box-shadow和background-image的兼容性问题
- HTML5结构标签、border-radius、box-shadow与text-shadow
- -webkit-border-radius border-radius -webkit-box-shadow的意思
- -webkit-border-radius和-moz-border-radius
- CSS3 边框 border-radius box-shadow
- CSS3 圆角属性 border-radius和-webkit-border-radius使用
- CSS3 圆角属性 border-radius和-webkit-border-radius使用
- border-radius在安卓APP中的效果 坑
- 为什么css的box-shadow和border-radius没效果解决方法
- border-radius与圆角
- 使用border-radius绘制椭圆
- 浅谈CSS3中的box-sizing(content-box与border-box)
- CSS属性:text-shadow,box-shadow,border-radius
- 阴影box-shadow,圆角border-radius,渐变背景background兼容性
- 文章标题
- React Native移动开发实战-2-如何调试React Native项目
- 记录将oracle 的*.dmp转存到sql server过程
- 欢迎使用CSDN-markdown编辑器
- 求阶乘:
- box-shade和border-radius在定位与未定位对象中的使用
- nopCommerce 3.9 大波浪系列 之 网页加载Widgets插件原理
- AtCoder Regular Contest 080 E
- 计蒜客 家具布置 (有依赖的背包问题)
- 编译libiconv-1.14解决./stdio.h:1010:1: 错误: ‘gets’未声明(不在函数内)错误
- Codeforces 794C【贪心】
- SpringMVC学习系列(5) 之 数据绑定-2
- LinkedList用法及源码解析
- 面向对象编程思想(OOP)