Bootstrap中实现图片圆角效果

Bootstrap 对图片的支持。Bootstrap 提供了三个可对图片应用简单样式的 class：

.img-rounded：添加 border-radius:6px 来获得图片圆角。
.img-circle：添加 border-radius:500px 来让整个图片变成圆形。
.img-thumbnail：添加一些内边距（padding）和一个灰色的边框。
请看下面的实例演示：

<!DOCTYPE html>
<html>
<head>
<title>Bootstrap 实例 - 图像</title>
<link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<img src="/wp-content/uploads/2014/06/download.png"
class="img-rounded">
<img src="/wp-content/uploads/2014/06/download.png"
class="img-circle">
<img src="/wp-content/uploads/2014/06/download.png"
class="img-thumbnail">
</body>
</html>

显示结果如下：

<img> 类
以下类可用于任何图片中。
.img-rounded 为图片添加圆角 (IE8 不支持)
.img-circle 将图片变为圆形 (IE8 不支持)
.img-thumbnail 缩略图功能
.img-responsive 图片响应式 (将很好地扩展到父元素)

Bootstrap中实现图片圆角效果相关推荐

boostrap 鼠标滚轮滑动图片_16种基于Bootstrap的css3图片hover效果
bootstrap-image-hover是一款基于Bootstrap的css3图片hover效果.这组图片hover效果共16种特效.同时该特效也支持非Bootstrap版本. 使用方法在页面中引 ...
bootstrap中让图片自适应不同的分辨率的方法
boostrap中加上这个样式class="img-responsive"图片就可以自适应,手机端同样适用详细介绍请查看全文:https://cnblogs.com/qianzf ...
Android之glide加载图片圆角效果
1 问题 Android加载图片需要圆角化,有什么简单粗暴的方法吗?当然有,用我们的神器glide 2 解决办法 1)简单办法 ImageView imageView = (ImageView)hel ...
Vue中实现图片放大镜效果代码复制即可用
页面布局的结构如下: <div class="spec-preview"><img :src="xxx" /><div class ...
Android实现ListView圆角效果
本文演示如何Android中实现ListView圆角效果. 无论是网站,还是APP,人们都爱看一些新颖的视图效果.直角看多了,就想看看圆角,这几年刮起了一阵阵的圆角设计风:CSS新标准纳入圆角元素,特 ...
浅谈图片蒙版效果-webkit-mask
会用PS的童鞋一定知道"蒙版"的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效 ...
怎么批量提取多个 Excel 文档中的图片
概要:批量提取 Excel 文档图片.批量提取 xlsx 文档图片.无损提取 Excel 图片.Excel 图片导出.批量提取图片.文档图片提取.批量导出文档图片 Excel 文档中可以插入文本.图片 ...
html图片蒙版效果代码,浅谈图片蒙版效果-webkit-mask_html/css_WEB-ITnose
会用PS的童鞋一定知道"蒙版"的概念,它可以在图片上实现一定的遮罩效果,当然这里我们不介绍ps里的蒙版,而是介绍利用CSS3的新属性-webkit-mask来实现网页中的图片遮罩效 ...
bootstrap中表格、修饰图片、浮动、背景框、提示框及关闭提示框、元素淡入淡出及jQuery中操作类名
表格: bootstrap中用类定义了几个风格的表格,使用时给table标签加上类名即可,具体如下: 类名描述 .table 基础表格:标题加粗,只有水平的淡灰色边框线条,没有垂直方向的线条 .ta ...

Bootstrap中实现图片圆角效果

Bootstrap中实现图片圆角效果相关推荐

最新文章

热门文章