css样式里可以用border-radius把div或图片变成带有一定圆角的，如果是div本身是正方形，设置圆角度是百分之五十，就是圆形。

border-radius：值可以是具体的px数值，也可以是百分比。
给div或img加这个属性，都可以把边缘变成圆角的或圆形的。
正方形的div或正方形的img图片，加border-radius:50%;会变成圆形。

此外，还可以单独设置两个边框的圆角，单个角：
border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius。

设置div一定透明度的背景色，颜色可以用rgba，这个有第四个参数，例如0.5，就是半透明。
图片的透明，可以直接做成半透明的的png图片。

测试代码：

<style>

   body{margin:0px;}

   #divall{margin-top:30px;margin-left:30px;width:500px;height:230px;background-image:url(bg1.png);position:relative;}

   #div1{width:100px;height:50px;background:rgba(255,0,0,0.5);border-radius:20px;text-align:center;line-height:50px;

   position:absolute;top:20px;float:left;left:20px;}

   #div2{width:100px;height:100px;border-radius:50%;position:absolute;top:20px;float:left;left:140px;background:#2c8a46;

   text-align:center;line-height:100px;}

   #div3{width:100px;height:100px;border-radius:50%;position:absolute;top:20px;float:left;left:260px;background-image:url(tu1.png);

   text-align:center;line-height:100px;color:white;}

   #div4{width:100px;height:100px;border-top-left-radius:40px;

   position:absolute;top:90px;float:left;left:20px;background:#95f1f7;

   text-align:center;line-height:100px;}

    #div5{width:100px;height:50px;border-top-right-radius:40px;

   position:absolute;top:140px;float:left;left:140px;background:rgb(214,216,16);

   text-align:center;line-height:50px;}

   #divall .a1{border-radius:50%;position:absolute;top:20px;float:left;left:380px;}

   #divall .a2{border-bottom-right-radius:50%;position:absolute;top:140px;float:left;left:260px;}

    #divall .a3{border-bottom-left-radius:50%;position:absolute;top:140px;float:left;left:380px;}

  </style>

 </head>

 <body>

 <div id="divall">

   <div id="div1">内容</div>

   <div id="div2">内容</div>

   <div id="div3">内容</div>

   <img class="a1" src="tu1.png">

   <div id="div4">内容</div>

   <div id="div5">内容</div>

   <div id="div6">内容</div>

   <img class="a2" src="tu2.png">

   <img class="a3" src="tu3.png">

</div>

图示：

css样式圆角和一定的透明度的更多相关文章

  1. css样式-区域内文字不会被选中

    要注意浏览器的兼容性: -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;

  2. css样式积累

    1.圆角:     border-radius:16px 16px 16px 16px;     2透明度:             filter: alpha(opacity=80);       ...

  3. 前端-CSS样式

    一.CSS介绍 CSS(Cascading Style Sheet),全称层叠样式,定义如何显示HTML内的元素,浏览器读取HTML文件时,读取到CSS样式时根据CSS规则来对内容进行渲染 1.CSS ...

  4. day043 前端css样式

    标签嵌套规则 块级标签能够嵌套某些块级标签和内敛标签(行内标签) 内敛标签不能块级标签,只能嵌套内联标签 块级标签能够设置高度和宽度 内敛标签不能设置,设置没有效果 Css样式 高度宽度: Width ...

  5. bootstrap 全局 CSS 样式

    http://v3.bootcss.com/css/#less-mixins-utility 深入了解 Bootstrap 底层结构的关键部分,包括我们让 web 开发变得更好.更快.更强壮的最佳实践 ...

  6. Boostrap入门级css样式学习

    1. 自适应网页设计 首先,在网页代码的头部,加入一行 viewport元标签.viewport是网页默认的宽度和高度, <meta name="viewport" cont ...

  7. CSS样式基础：

    CSS:外部文件导入  <link rel="stylesheet" type="text/css" href="./style.css&quo ...

  8. 【03】全局 CSS 样式

    全局 CSS 样式 设置全局 CSS 样式:基本的 HTML 元素均可以通过 class 设置样式并得到增强效果:还有先进的栅格系统. 概览 深入了解 Bootstrap 底层结构的关键部分,包括我们 ...

  9. 百万年薪python之路 -- 前端CSS样式

    CSS样式 控制高度和宽度 width宽度 height高度 块级标签能设置高度和宽度,而内联标签不能设置高度和宽度,内联标签的高度宽度由标签内部的内容来决定. 示例: <!DOCTYPE ht ...

随机推荐

  1. webpack开发环境速度优化

    随着项目的增大,项目运行速度会越来越慢,导致影响开发进度.需要提升开发时代码的运行速度. 1. ScopeHoisting作用域提升 该插件在production模式下默认开启.development ...

  2. Linux 内存Cache和Buffer理解

    在 Linux 系统中,我们经常用 free 命令来查看系统内存的使用状态.在一个 RHEL6 的系统上,free 命令的显示内容大概是这样一个状态:   [root@tencent64 ~]# fr ...

  3. lixuxmint系统定制与配置（4）-应用安装

    小书匠Linux 先简单列一下,其实每个软件都有自己的个性化配置,以后有时间了,逐个记录下来.编程主力环境是Python,编辑器使用Jupyter,这个编辑器是在远程服务器启动,映射端口到本地来编辑. ...

  4. 【一起来烧脑】读懂JQuery知识体系

    背景 在现在就业的过程中,会运用JQuery是你的加分项,那么什么是JQuery,嗯,jquery是JavaScript的函数库,是一种轻量级的JavaScript库,写得少,做的多,导致jQuery ...

  5. 最大字段和&洛谷11月月赛DIV2 T1

    蒟蒻只能打一打DIV2的基础题 太卑微了 这道题的本质其实是再建一个数组,如果s串i位置是0那么就给a[i]赋值为1,表示要累加个数,如果是1那么就把a[i]赋值为-1,表示个数减一,最后求最大子段和 ...

  6. CF1215题解

    E 假设从小到大排序,每次交换相邻两个,最小次数即冒泡排序也就是逆序对 考虑值域较小,把每个值映射到\([1,20]\) 设\(f_i\)为已经加入集合为\(i\)的值的最小逆序对个数,考虑填表法 即 ...

  7. 2019 ASP.NET / ASP.NET Core 学习路线 (有中文翻译)

    1. 点击此处查看 一个了不起的.NET Core 库.工具.框架和软件的集合 2. 以下路线 适用于 ASP NET 与 ASP NET Core (建议另存为到本地, 然后再查看) 点击此处查看 ...

  8. Git的使用(6) —— 自动填写远端Git用户名密码

    1. 问题描述 公司项目组用私服的Git远程版本库,每一次推送和拉取服务都需要输入用户名和密码,过于繁琐. 2. 解决方法 Windows系统提供了"管理Windows凭据"的功能 ...

  9. 使用 concurrently 并行地运行多个命令（同时跑前端和后端的服务）

    我现在有一个项目是这样的,前端是用 React 写的,后端是用 Nodejs,目录结构如下: . ├── README.md ├── backend ├── node_modules ├── pack ...

  10. Python操作excel工具

    python操作excel的工具类有很多,下面举几个常见的工具类: 一. 1.xlrd 只能读取excel操作,支持xls和xlsx两种格式的 2.xlwt 只能写入excel操作,只支持 xls格式 ...