圆角边框以及阴影制作卡片式图片 - 学习笔记

圆角边框以及阴影制作卡片式图片

圆角边框 border-radius
卡片使用阴影 box-shadow

利用阴影给图片底部创造一个长方形

内部的元素会直接覆盖整个阴影

HTML 部分

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>卡片式图片</title>
</head>
<body>
<div class="shadow">
 <img src="images/a5.jpg" alt="风景" style="width:200px;height:300px">
 <div class="container">
  <p>这个世界上充满了美好与希望</p>
 </div>
</div>
</body>
</html>

CSS 部分

<style type="text/css">
body {
    margin:25px;
}
.shadow {
    width:290px;
    background-color:#FFF;
    box-shadow:0 10px 10px 0 rgba(0,0,0,0.2);
    /* 0 阴影水平偏移值(可取正负值)
       10px 阴影垂直偏移值(可取正负值)
       10px 阴影模糊值
       rgba(0,0,0,0.2) 阴影颜色
    */
    margin-bottom:25px; /* 底外边距 */
    border-radius:25px; /* 设置圆角 */
    -moz-border-radius:25px; /* 老版的Firefox浏览器 */
}
img {
    border-radius:25px 25px 0px 0px; /* 设置圆角 上右下左 */
    -moz-border-radius:25px 25px 0px 0px; /* 老版的Firefox浏览器 */
}
.container {
    text-align:center; /* 文字居中 */
    padding-bottom:10px; /* 底内边距 */
}
</style>

图片展示

此文到此结束

此文参考链接 http://www.w3school.com.cn/cssref/pr_box-shadow.asp

时间： 2024-12-22 19:01:58

圆角边框以及阴影制作卡片式图片 - 学习笔记的相关文章

jQuery箭头切换图片 - 学习笔记

jQuery箭头切换图片布局 3d位移变形原点 jQuery transform:translate3d(x,y,z): x 代表横向坐标移向量的长度 y 代表纵向坐标移向量的长度 z 代表Z轴移向量的长度取值不可为百 scale() 缩放 transform-origin:0 50%: top left | left top 等价于 0 0 top | top center | center top 等价于 50% 0

生成随机唯一字加图片-学习笔记

import java.awt.Color; import java.awt.Font; import java.awt.GradientPaint; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.io.IOException; import java.util.UUID; import javax.imageio.ImageIO; import javax.servlet.ServletEx

纯代码利用CSS3 圆角边框和盒子阴影制作 iphone 手机效果

大家好,我是小强老师. 今天我们看下CSS3最为简单的两个属性. css3给我们带来了很多视觉的感受和变化,以前的图片做的事情,很多代码都能实现. 下面给大家简单介绍两种最为常见的圆角边框和盒子阴影,同时附上一个iphone 手机效果,提供大家练习. 1.border-radius 圆角矩形语法格式: border-radius: 水平半径/垂直半径只不过我们平时都把后面的这个垂直半径给省略了. 圆角也有连写的方法 border-radius: 左上角右上角右下角左下角;

CSS第四天总结更多的属性圆角边框图片段落属性颜色渐变盒子阴影

圆角边框: border-radius 一个值时表示四个角用的圆半径,4个值时分别是左上角.右上角.左下角.右下角,单位可以是px和百分比,百分比是半径相对于边框长度的比例在CSS3中我们终于可以快捷地设置圆角,而且通过这个属性我们还可以做出圆.半圆.四分一圆.椭圆等图形. 常用的圆角效果: div{border-radius: 15px;} 两个值时,分别指水平方向的半径和垂直方向的半径,用/号隔开,如: div{border-radius:5px 3px 4px 2px/1px 2p

CSS3(1)---圆角边框、边框阴影

CSS3(1)---圆角边框.边框阴影 CSS3可以简单理解成是CSS的增强版,它的优点在于不仅有利于开发与维护,还能提高网站的性能. 一.圆角边框圆角在实际开放过程中,还是蛮常见的.以前基本是通过背景图片做的,有了CSS3后可以使用简单的属性搞定,可以通过border-radius设置元素的圆角半径. 1.圆角边框语法圆角边框属性 : border-radius 属性值 border-radius: 属性1,属性2,属性3,属性4 # 四个值:第一个值为左上角,第二个值为右上角,第三个值为

CSS3下不一样的阴影、背景和圆角边框样式

CSS3下不一样的阴影.背景和圆角边框样式 CSS2.1 发布至今已有7年的历史.CSS3的出现就是增强CSS2.1的功能,减少图片的使用次数以及解决HTML页面上的特殊效果当前,CSS3技术最适合在移动Web开发中使用的特性包括: ●增强的选择器 ●阴影 ●强大的背景设置 ●圆角边框阴影: 现在的CSS3样式已经支持阴影样式效果.目前可使用的阴影的效果分为两种:文本内容的阴影效果和元素的阴影效果. box-shadow CSS3的box-shadow属性是让元素具有阴影的效果,其语法如下:

css3：border-radius圆角边框详解 (变圆图片)

转:http://www.kuqin.com/shuoit/20141014/342620.html border-radius:50% 今天来聊聊这个border-radius属性,radius的英文意思是弧度的意思,而国人更喜欢称之为圆角,因为它可以使得我们的边框有棱有角.当年前辈们都是用图片君搞定圆角的年代或用一条条边框构造的年代已经一去不复返,而移动互联网的高速发展为border-radius属性的飞速发展,so今天就来聊聊圆角边框.虽然英文翻译过来叫做半径弧度,但是为了能让大家更加熟悉

Web 前端技术：CSS3---新属性，浏览器支持度，圆角边框（border-radius），阴影（box-shadow），文字与字体（text-shadow属性、word-wrap属性、@font-face规则），2D转换、过渡与动画（transform属性），3D变换

浏览器支持度 CSS3属性: columns:规定列的宽度和列数默认宽度.列数值为auto column-width:每栏的宽度 column-gap :两栏之间的间距距离 column-count : 栏目的数目 column-rule : color(色值) width(宽度) style(线条样式) 分栏中的分割线的颜色宽度及样式的设定 1.border-radius属性(圆角边框) eg: 结合不同浏览器兼容问题,使用该CSS3新属性 eg: 2.box-shadow属性(阴影) eg

字体样式圆角边框

字体样式: font-family: 属性值可以是中文或者英文设置字体例:font-family:Arial,“微软雅黑”; sans-serif:非衬线字体{没有笔锋} font-style:取值:italic 默认值:Nomal foot-weight:bold(加粗) line-height:height(行高实现文本垂直居中) 引用字体: 1.下载字体文件,保存在项目中. 2.@font-face,新建字体. 3.使用字体. 圆角边框:最终展示在页面的是圆角的弧度例:border