<!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. 百度在职 iOS 架构师的成长笔记，送给还在迷茫的你！

    前言 我们经常在网上会看到这样的文章,你的同龄人正在如何如何.......这是典型的贩卖焦虑的文章.的确,现阶段,刚毕业几年的年轻人,面临车,房子等,有时候压力挺大的. 但你过度焦虑的话,每天生活在恐 ...

  2. 使用idea搭建maven项目

    前言---2018-11-24 博主最近呀,也是一直在看书,但是呢有许多小伙伴和博主反应,在eclipse都会搭建maven项目,但是呢到了idea就不会了,于是了博主就起了个早床写一遍博客咯.希望对 ...

  3. RTC子系统

    目录 RTC子系统 引入 hctosys.c interface.c class.c 小结 流程一览 框架分析 rtc_init rtc_device_register s3c_rtc_probe o ...

  4. kubernetes云平台管理实战： 集群部署（一）

    一.环境规划 1.架构拓扑图 2.主机规划 3.软件版本 [root@k8s-master ~]# cat /etc/redhat-release CentOS Linux release 7.4.1 ...

  5. GIT-windows系统部署git服务器

    windows系统部署git服务器 因为需要所以就来利用IIS(Internet Information Service )来进行搭建. 进入正文: 不管你是什么win7.win8.win8.1还是w ...

  6. 第六节：反射（几种写法、好处和弊端、利用反射实现IOC）

    一. 加载dll,读取相关信息 1. 加载程序集的三种方式 调用Assembly类下的三个方法:Load.LoadFile.LoadFrom. //1.1 Load方法:动态默认加载当前路径下的(bi ...

  7. Oracle使用PLSQL导入数据后中文乱码的解决方法

    新建环境变量 名:NLS_LANG 值:SIMPLIFIE DCHINESE_CHINA.ZHS16GBK 保存后重启PLSQL Developer 重新导入. 如果还是乱码,将上面8的环境变量值改为 ...

  8. C#控件数组批量生成控件

    在编写C#窗体应用程序的时候,有时候需要生成好多个功能相似的同一种控件(比如数字键盘按键.单选框等),这时候使用窗体编辑器,费时费力,不便于修改.因此可以采用批量生成控件的形式. 以批量生成按钮为例 ...

  9. mysql 分库分表 ~ 柔性事务

    一 定义 TCC方案是可能是目前最火的一种柔性事务方案二 具体 内容 TCC=try(预设)-confrim(应用确认)-canal(回滚取消)三 目的 解决跨服务调用场景下的分布式事务问题,避免使用 ...

  10. spring事务源码分析结合mybatis源码(一)

    最近想提升,苦逼程序猿,想了想还是拿最熟悉,之前也一直想看但没看的spring源码来看吧,正好最近在弄事务这部分的东西,就看了下,同时写下随笔记录下,以备后查. spring tx源码分析 这里只分析 ...