⑴ 如何用css画出一个圆圈，里面有个对号
.box {
width: 150px;
height: 150px;
margin: 100px auto;
border-radius : 5e%;
border: 5px solid #o0000e;
display: flex;
justify-content: center;
align-items : center;
}
.box: : before {
content: "";
display: block;
width: 88px;
height: 5epx;
border: 20px solid #ee000e;
border-right: none;
border-top: none;
transform: rotate(-45deg) translate(7px，-10px);
}
⑵ 用css样式中的定位做出图中盒子的效果
<!DOCTYPEhtml>
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>RunJS演示代码</title>
<style>
*{
margin:0;
padding:0;
border:0;
}
body{
background-color:brown;
}
.wrap{
margin:auto;
border:5pxsolidwhite;
margin-top:10px;
width:300px;
height:300px;
}
.wrapdiv{
width:150px;
height:150px;
border:1pxsolidwhite;
background-color:gray;
position:relative;
}
.one{
z-index:3;
}
.three{
left:150px;
top:-304px;
}
div.four{
width:225px;
height:225px;
background-color:yellow;
z-index:2;
position:relative;
left:37px;
top:-572px;
}
div.five{
width:175px;
height:175px;
background-color:orange;
z-index:3;
position:relative;
left:63px;
top:-775px;
}
</style>
</head>
<body>
<divclass="wrap">
<divclass="one">
</div>
<divclass="two">
</div>
<divclass="three">
</div>
<divclass="three">
</div>
<divclass="four">
</div>
<divclass="five"></div>
</div>
</body>
</html>
⑶ 在css中怎样设置能保证盒子绘制出来是正方形
首先，把宽和高设为同样的固定值，则肯定是正方形，这个不用多说；
其次，如果是自适应的界面，需要用百分比来设置正方形的边长，则可以用css3的新增长度单位vw、vh来设置，1vw等于视口宽度（viewportwidth）的百分之一，也就是说100vw就是视口的宽度。同理，1vh等于视口高度（viewportheight）的百分之一。比如下面这个正方形的边长是屏幕宽度的50%：
<divstyle="width:50vw;height:50vw;background-color:#888"></div>
但是，这个方法要求浏览器支持css3，一些老的浏览器可能就不支持了。
⑷ CSS+DIV如何新建一个盒子
<html>
<head>
<title>无标题文档</title>
<style type="text/css">
.box{ width:500px; height:500px; border:1px solid #F00;}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
这就是一个简单的div盒子，盒子就是所谓的一个个div，N个DIV组成的就是HTML网页。具体的你需要看一些相关书籍学习一下。
⑸ 怎么用css画出来一个菱形
.lxp {
width: 30px;
height: 30px;
transform: rotateX(45deg);
}
.lx {
width: 20px;
height: 20px;
background: green;
transform: rotate(45deg);
}
<div class="lxp">
<div class="lx"></div>
</div>
这才叫菱形好吧 具体什么形状调角度和长宽
⑹ CSS如何给图片添加点击显示一个DIV盒子的效果
首先定位div盒子的位子，然后display:none隐藏起来，然后图片调用onclik方法，即在img标签上写<img onclick="$('.div').show();">这样就可以了。
注意:$(".div")中间的.div就是你要出现的那个盒子，选择他的class，或者给他个id，表示选择TA。
⑺ 这个用css盒模型怎么实现
这个很简单啊，先一个大的盒子，里面写三个盒子，两个横的，最后一个先旋转90度，然后再定位到水平居中，大概思路就是这样的。
⑻ 如何使用CSS画一个空心长方形 要代码哦，是使用DIV+CSS
垂直线还不简单么，给一个层定义一个边框样式。右边框或者左边框，然后给颜色跟线条的粗细样式即可
⑼ 如何用css3画一个有边框的三角形
如果是一个正方形，我们写边时，会用到border，但我们这里讨论的三角形本身就是border，不可能再给border添加border属性，所以我们需要用到其他办法。
最容易想到的，是叠加层。思路是将两个三角形叠加在一起，外层三角形稍大一些，颜色设置成边框所需的颜色；内层三角形绝对定位在里面。整体就能形成带边框三角形的假象。
这里就涉及到一个绝对定位的问题，上、下、左、右四种方向的三角形相对于父级定位是不同的。首先我们来看下，当定位都为0（left:0px; top:0px;）时，会发生什么。
HTML：
<!-- 向上的三角形 -->
<div class="triangle_border_up">
<span></span>
</div>
<!-- 向下的三角形 -->
<div class="triangle_border_down">
<span></span>
</div>
<!-- 向左的三角形 -->
<div class="triangle_border_left">
<span></span>
</div>
<!-- 向右的三角形 -->
<div class="triangle_border_right">
<span></span>
</div>
CSS:
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黄*/
position:absolute;
top:0px;
left:0px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黄 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
position:absolute;
top:0px;
left:0px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
position:absolute;
top:0px;
left:0px;
}
效果如图：
为什么不是我们预想的如下图的样子呢
原因是，我们看到的三角形是边，而不是真的具有内容的区域，请回忆下CSS的盒子模型的内容。
绝对定位（position:absolute），是根据相对定位父层内容的边界计算的。
再结合上篇我们最开始写的宽高为0的空div:
这个空的div，content的位置在中心，所以内部三角形是根据中心这个点来定位的。
为了看清楚一些，我们使用上一次的方法，给span增加一个阴影：
1
box-shadow:0 0 2px rgba(0,0,0,1);
效果如图：
这回我们明确的知道了，内部的三角形都是根据外部三角形实际内容的点来定位的，而非我们肉眼看到的三角形的边界定位。
HTML不变，CSS：
/*向上*/
.triangle_border_up{
width:0;
height:0;
border-width:0 30px 30px;
border-style:solid;
border-color:transparent transparent #333;/*透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_up span{
display:block;
width:0;
height:0;
border-width:0 28px 28px;
border-style:solid;
border-color:transparent transparent #fc0;/*透明 透明 黄*/
position:absolute;
top:1px;
left:-28px;
}
/*向下*/
.triangle_border_down{
width:0;
height:0;
border-width:30px 30px 0;
border-style:solid;
border-color:#333 transparent transparent;/*灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_down span{
display:block;
width:0;
height:0;
border-width:28px 28px 0;
border-style:solid;
border-color:#fc0 transparent transparent;/*黄 透明 透明 */
position:absolute;
top:-29px;
left:-28px;
}
/*向左*/
.triangle_border_left{
width:0;
height:0;
border-width:30px 30px 30px 0;
border-style:solid;
border-color:transparent #333 transparent transparent;/*透明 灰 透明 透明 */
margin:40px auto;
position:relative;
}
.triangle_border_left span{
display:block;
width:0;
height:0;
border-width:28px 28px 28px 0;
border-style:solid;
border-color:transparent #fc0 transparent transparent;/*透明 黄 透明 透明 */
position:absolute;
top:-28px;
left:1px;
}
/*向右*/
.triangle_border_right{
width:0;
height:0;
border-width:30px 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #333;/*透明 透明 透明 灰*/
margin:40px auto;
position:relative;
}
.triangle_border_right span{
display:block;
width:0;
height:0;
border-width:28px 0 28px 28px;
border-style:solid;
border-color:transparent transparent transparent #fc0;/*透明 透明 透明 黄*/
position:absolute;
top:-28px;
left:-29px;
效果如图：
进一步来写气泡框的三角形，如图所示：
HTML：
<div class="test_triangle_border">
<a href="#">三角形</a>
<div class="popup">
<span><em></em></span>纯CSS写带边框的三角形
</div>
</div>
CSS：
.test_triangle_border{
width:200px;
margin:0 auto 20px;
position:relative;
}
.test_triangle_border a{
color:#333;
font-weight:bold;
text-decoration:none;
}
.test_triangle_border .popup{
width:100px;
background:#fc0;
padding:10px 20px;
color:#333;
border-radius:4px;
position:absolute;
top:30px;
left:30px;
border:1px solid #333;
}
.test_triangle_border .popup span{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #333;
position:absolute;
top:-10px;
left:50%;/* 三角形居中显示 */
margin-left:-10px;/* 三角形居中显示 */
}
.test_triangle_border .popup em{
display:block;
width:0;
height:0;
border-width:0 10px 10px;
border-style:solid;
border-color:transparent transparent #fc0;
position:absolute;
top:1px;
left:-10px;
}
(2)东北、东南、西北、西南三角形的写法
继续，来写西北方（↖），东北方（↗），西南方（↙），东南方（↘）的三角形。
原理如图：
根据颜色的划分，每个可以有两种CSS来写，分别利用不同的边来创造所需三角形。
写一个nw（↖）的例子：
HTML：
1
<div class="triangle_border_nw"></div>
CSS(1)：
.triangle_border_nw{
width:0;
height:0;
border-width:30px 30px 0 0;
border-style:solid;
border-color:#6c6 transparent transparent transparent;
margin:40px auto;
position:relative;
}
CSS(2)：
.triangle_border_nw{
width:0;
height:0;
border-width:0 0 30px 30px;
border-style:solid;
border-color:transparent transparent transparent #6c6;
margin:40px auto;
position:relative;
}
两种CSS效果均如图所示：
以上是利用CSS写三角形，晋级到
(1)有边框的三角形
(2)东北、东南、西北、西南三角形的写法
⑽ CSS+DIV写盒子模型图
网页盒子模型存在两种：
1：标准W3C盒子模型； 2：IE盒子模型（IE浏览器默认的模型）。
在两种不同模型网页里，定义了相同CSS属性的元素显示效果是不一样的，下面就用公式来区分这两种不同的盒子模型。
1：标准W3C盒子模型
宽=width+(padding-left)+(padding-right)+(margin-left)+(margin-right)+(border-left)+(border-right)
高=height+(padding-top)+(padding-bottom)+(margin-top)+(margin-bottom)+(border-top)+(border-bottom)
2： IE盒子模型
宽=width+(border-left)+(border-right)
高=height+(border-top)+(border-bottom)
该模型是IE浏览器默认的盒子模型，当然也可以对其进行更改，在页面最上方加如下代码：
1<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">