<!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. Jenkins-在windows上配置自动化部署（Jenkins+Bonobo.Git.Server）

    本文配置Jenkins.git服务器采用 Bonobo.Git.Server 1. 登录后,打开Jenkins界面,新建一个任务 2. 配置信息 3. 配置git项目地址,我们先进行其他配置,等会再继 ...

  2. I/O模型

    目录: IO模型 阻塞IO 非阻塞IO IO多路复用 异步IO 总结: 1.阻塞IO模型 多线程 多进程 线程池 进程池 全是阻塞IO 2.非阻塞IO 协程是一种非阻塞IO 1.setblocking ...

  3. IDEA打印gc日志，设置JVM参数方法

    打印gc日志 1.对指定运行程序输出GC日志: 点击edit configurations... 在vm options处加入-XX:+PrintGCDetails 测试:代码调用system.gc后 ...

  4. Beamer 中的页面链接

    \documentclass[]{beamer} \usetheme{Madrid} \usenavigationsymbolstemplate{} \title{Main Title} \autho ...

  5. [物理学与PDEs]第2章习题6 有旋的 Navier-Stokes 方程组

    试证明: 由 Navier-Stokes 方程组描述的流体运动一般总是有旋的, 即若 $\rot{\bf u}={\bf 0}$, 则 Navier-Stokes 方程组 (3. 4)-(3. 5) ...

  6. 残差网络ResNet笔记

    发现博客园也可以支持Markdown,就把我之前写的博客搬过来了- 欢迎转载,请注明出处:http://www.cnblogs.com/alanma/p/6877166.html 下面是正文: Dee ...

  7. 用可配置外部工具的编辑器编译与执行java

    用可配置外部工具的编辑器编译与执行java 最近用了everedit.觉得比之前平时用的Editplus有更多的细节与功能要好许多. 这里就写写用everedit编译与执行java的方法. 原理 ja ...

  8. 一文掌握 Linux 性能分析之内存篇

    本文首发于我的公众号 Linux云计算网络(id: cloud_dev),专注于干货分享,号内有 10T 书籍和视频资源,后台回复「1024」即可领取,欢迎大家关注,二维码文末可以扫. 前面我们已经学 ...

  9. zabbix批量监控域名下nginx的访问50x状态码数量

    背景: 购物车相关的站点某些页面经常出现502,如果超过一些阈值则需要报警给管理员知道 .自动发现脚本的编写 # vim /usr/local/zabbix_agents_3.2.0/scripts/ ...

  10. 【原创】大数据基础之Oozie（2）使用

    命令行 $ oozie help 1 导出环境变量 $ export OOZIE_URL=http://oozie_server:11000/oozie 否则都需要增加 -oozie 参数,比如 $ ...