<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>定位练习1</title>

    <style type="text/css">

        .con{

            width:100px;

            height:100px;

            background-color:gold;

            margin:50px auto 0;

            position:relative;

            border-radius:14px;  /* 角是圆的 */

        }

        .box{

            width:28px;

            height:28px;

            background-color:red;

            color:#fff;

            text-align: center;

            line-height:28px;

            position:absolute;

            left:86px;

            top:-14px;

            border-radius:14px; /* 圆形 */

        }

    </style>

</head>

<body>

    <div class="con">

        <div class="box">5</div>

    </div>

</body>

</html>

页面效果：

css 制作圆角、圆形图形布局的更多相关文章

  1. 关于css制作圆角

    三个阶段: 1.背景图片: 2.css2.0+标签模拟圆角: 3.css3.0圆角属性(border-radius). 1.1.背景图片--宽度固定,高度自适应圆角 为容器设置宽度 在主体的上方加一个 ...

  2. css制作的各种图形

    1.六角形的制作: 代码: #star-six{ height:0; width:0; border-bottom:100px solid red; border-left: 50px solid t ...

  3. css制作三分圆形

    效果图展示: 原理很简单,主要运用transform这个样式,通过斜切和旋转达成 html: css: 怎样,是不是很简单

  4. CSS 制作 圆角TAB选项卡下拉效果(顺便学习CSS伪元素

    CSS伪元素: 伪元素如果没有设置“content”属性,伪元素是无用的. 使用伪元素插入的内容在页面的源码里是不可见的,只能在css里可见 插入的元素在默认情况下是内联元素(或者,在html5中,在 ...

  5. CSS制作图形速查表

    很少会有人意识到,当浏览器绘制的border,会有一个角度的问题.我们就是得用这样的一个技巧来制作三角的效果.我们只需要保证一边的边框是有色,其他边框色为透明色,这样我们就很容易制作出三角形,然后改变 ...

  6. 【转】CSS制作图形速查表-存档

      http://www.w3cplus.com/css/css-simple-shapes-cheat-sheet http://www.cnblogs.com/powertoolsteam/p/c ...

  7. 【01】CSS制作的图形

    [01]CSS制作的图形   绘制五角星:   通过border绘制三角形.然后通过transfrom来旋转35度. 绘制对称的图形,最后绘制顶部的三角形即可.   元素本身,加上:before和:a ...

  8. 利用CSS制作图形效果

    前言 关于如何使用CSS来制作图形,比如说圆形,半圆形,三角形等的相关教程还是挺多的,今天我主要想解释一下里面一些demo的实现原理,话不多说,开始吧   以下所有内容只使用一个HTML元素.任何类型 ...

  9. CSS之纯CSS画的基本图形（矩形、圆形、三角形、多边形、爱心、八卦等）

    图形包括基本的矩形.圆形.椭圆.三角形.多边形,也包括稍微复杂一点的爱心.钻石.阴阳八卦等.当然有一些需要用到CSS3的属性,所以在你打开这篇文章的时候,我希望你用的是firefox或者chrome, ...

随机推荐

  1. IIS虚拟目录内的视频文件访问出错：HTTP 错误 404.3 - Not Found 由于扩展配置问题而无法提供您请求的页面。如果该页面是脚本，请添加处理程序。如果应下载文件，请添加 MIME 映射。

    MIME类型就是设定某种扩展名的文件用一种应用程序来打开的方式类型,当该扩展名文件被访问的时候,浏览器会自动使用指定应用程序来打开.多用于指定一些客户端自定义的文件名,以及一些媒体文件打开方式. 我是 ...

  2. OS + CentOS / http_proxy / https_proxy / dalishangwang / repo

    s OS + Linux RedHat / redhat7 / redhat 7 / redhat 6 / redhat 5 https://lindows.iteye.com/blog/456637 ...

  3. win7 远程连接服务器出现身份验证错误，又找不到加密Oracle修正

    今天想用远程桌面连接登录服务器,结果,弹出一个错误的提示框:发生身份验证错误,要求的函数不受支持. 然后在网上找了相关的教程,基本上所有的方法都是如下所示: 策略路径:"计算机配置" ...

  4. SpringBoot入门-2(两种热部署方式)

    在编写代码的时候,你会发现我们只是简单把打印信息改变了,就需要重新部署,如果是这样的编码方式,那么我们估计一天下来就真的是打几个Hello World就下班了.那么如何解决热部署的问题呢?那就是spr ...

  5. html css hover也会冒泡

    <HEAD> <style type="text/css"> div:hover { color:blue !important; } </style ...

  6. [物理学与PDEs]第2章习题8 一维定常粘性不可压缩流体的求解

    考察固定在 $y=0$ 与 $y=1$ 处两个平板之间的定常粘性不可压缩流体沿 $x$ 方向的流动. 设 $p=p(x)$, 且已知 $p(0) =p_1$, $p(L)=p_2$, $p_1> ...

  7. C#中访问私有成员技巧

    源代码是别人的,你就不能修改源代码,只提供给你dll.或者你去维护别人的代码,源代码却有丢失.这样的情况如果你想知道私有成员的值,甚至去想直接调用类里面的私有方法.那怎么办呢?其实在.net中访问私有 ...

  8. 实现线程安全先进先出的dict

    # encoding:utf-8 from collections import OrderedDictfrom collections import MutableMappingfrom threa ...

  9. JS媒体查询

    样式的改变使用C3的媒体查询 行为和功能的改变使用JS的媒体查询 matchMedia()方法参数可写任何一个CSS@media规则,返回的是新的MediaQueryList对象,该对象有两个属性 m ...

  10. 解决radio、select表单返回时，再次选择失效

    应用场景:我们在选择好radio跟select之后提交表单,返回历史记录时,再次选择,提交表单,发现提交的是上次表单选择的 解决办法:我们可以一进页面就给radio跟select的选项重置掉,因为,返 ...