Bootstrap中实现图片圆角效果

最新推荐文章于 2024-05-10 03:05:44 发布
最新推荐文章于 2024-05-10 03:05:44 发布
阅读量2.4k 收藏 1
点赞数
分类专栏： 前端 文章标签： Bootstrap
原文链接：https://www.mk2048.com/blog/blog.php?id=j2jk0j0ib&title=Bootstrap%E4%B8%AD%E5%AE%9E%E7%8E%B0%E5%9B%BE%E7%89%87%E5%9C%86%E8%A7%92%E6%95%88%E6%9E%9C
版权

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

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

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4.    <title>Bootstrap 实例 - 图像</title>  
  5.    <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">  
  6.    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>  
  7.    <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>  
  8. </head>  
  9. <body>  
  10.   
  11. <img src="/wp-content/uploads/2014/06/download.png"   
  12.    class="img-rounded">  
  13. <img src="/wp-content/uploads/2014/06/download.png"   
  14.    class="img-circle">  
  15. <img src="/wp-content/uploads/2014/06/download.png"   
  16.    class="img-thumbnail">  
  17. </body>  
  18. </html>    

       

 显示结果如下：

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

前端老码农
关注
专栏目录
bootstrap文字，图片
hbl020305的博客
08-19 1447
bootstrap文字，图片
Bootstrap—实现圆角、圆形头像和响应式图片
热门推荐
生如夏花 炫至茶靡
12-13 3万+
Bootstrap提供了四种用于类的样式，分别是： .img-rounded：圆角 (IE8 不支持)，添加 border-radius:6px 来获得图片圆角； .img-circle：圆形 (IE8 不支持)，添加 border-radius:50% 来让整个图片变成圆形。 .img-thumbnail：缩略图功能，添加一些内边距（padding）和一个灰色的边框。 .img-resp
Bootstrap中的圆角图片效果
weixin_39037804的博客
09-20 679
图片形状 通过为 <img>元素添加以下相应的类，可以让图片呈现不同的形状。 跨浏览器兼容性 请时刻牢记：Internet Explorer 8 不支持 CSS3 中的圆角属性。 复制 ...
Bootstrap中实现圆角、圆形头像和响应式图片/css3圆角、图片阴影效果总结
weixin_42172723的博客
04-13 580
1、Bootstrap提供了四种用于<img>类的样式，分别是： .img-rounded：圆角 (IE8 不支持)，添加 border-radius:6px 来获得图片圆角 .img-circle：圆形 (IE8 不支持)，添加 border-radius:50% 来让整个图片变成圆形 .img-thumbn...
Bootstrap 5-圆角
m0_73839298的博客
05-10 275
【代码】Bootstrap 5-圆角。
Bootstrap 5-圆形圆角
最新发布
m0_73839298的博客
05-10 313
【代码】Bootstrap 5-圆形圆角。
Bootstrap实现圆角、圆形头像和响应式图片
08-31
在本文中，我们将深入探讨如何利用Bootstrap实现圆角、圆形头像以及响应式图片。 首先，Bootstrap提供了`.img-rounded`类，这个类用于创建带有圆角的图片。通过应用CSS的`border-radius`属性，Bootstrap将图片的四...
Bootstrap3 图片（响应式图片&图片形状）
08-31
在Bootstrap3中，实现响应式图片非常简单，只需给图片元素添加一个类名.img-responsive。添加这个类后，图片会应用CSS样式，使图片的最大宽度设置为100%，并且高度自动调整，这样图片就可以在不同尺寸的容器中自由...
详解Bootstrap四种图片样式
11-24
`来实现图片的圆角效果。圆角可以给图片带来更柔和的视觉感受。在HTML中，只需给`<img>`标签添加`class="img-rounded"`即可。例如： ```html ``` 在CSS中，`.img-rounded`的样式如下： ```css .img-rounded {...
Bootstrap--圆角图片`圆形图
weixin_30493401的博客
12-11 226
转载于:https://www.cnblogs.com/qiyiyifan/p/6159823.html
bootstrap 圆角_Bootstrap的边框样式
weixin_34599904的博客
02-01 7064
使用边框通用定义类来快速设置元素的边框和边框半径，适用于图像、按钮或任何其他元素。添加border添加边框属性，显示指定边框。<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, ini...
bootstrap 圆角_bootstrap知识总结
weixin_29190573的博客
01-31 868
Bootstrap框架一、Bootstrap简介Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。二．Bootstrap 特点(1)**跨设备、跨浏览器：**可以兼容所有现代浏览器，包括比较诟病的IE7、8。(2)**响应式布局：**不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显...
bootstrap 圆角_前端干货：bootstrap知识总结
weixin_42526417的博客
01-31 671
Bootstrap框架一、Bootstrap简介Bootstrap是一个用于快速开发Web应用程序和网站的前端框架。Bootstrap是基于HTML、CSS、JavaScript的。二．Bootstrap 特点(1)**跨设备、跨浏览器：**可以兼容所有现代浏览器，包括比较诟病的IE7、8。(2)**响应式布局：**不但可以支持PC端的各种分辨率的显示，还支持移动端PAD、手机等屏幕的响应式切换显...
Bootstrap5 图像形状
qq_44174346的博客
07-28 292
=""
06Bootstrap5图像形状
醉瑾_的博客
12-09 277
06Bootstrap5图像形状 <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,initial-scale=1"> <title>菜鸟教程Bootstrap5图像形状</title> <link rel=
bootstrap 布局圆角卡片信息卡
快乐每一天
01-20 1708
  .product-container { width: 260px; margin: 0 auto; border-radius: 10px; background: #f6f8f7; .name { border-bottom: 1px solid @gray-light; ...
Bootstrap系列之边框（Borders）
老__L的博客
05-29 4371
边框（Borders）
第十周笔记
weixin_48999849的博客
05-07 165
CSS定位 1.定位概述 (1)CSS 定位和浮动 CSS 为定位和浮动提供了一些属性，利用这些属性，可以建立列式布局，将布局的一部分与另一部分重叠，还可以完成多年来通常需要使用多个表格才能完成的任务。 定位的基本思想很简单，它允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置。显然，这个功能非常强大，也很让人吃惊。 浮动不完全是定位，不过，它当然也不是正常流布局。我们会在后面的章节中明确浮动的含义。 (2)一切皆为框 div、h1 或 p 元素常常被称为块
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值