用shape-outside实现文字环绕

  • 实现效果：

  • 介绍：shape-outside是让文字从图片外部开始环绕，以及设置图片的形状。
  • 函数定义：
  1. circle(size at x y);用于制作圆形size可以是%,px,rem,v*
  2. ellipse(size);用于制作椭圆形
  3. inset(top,right,bottom,left,round);矩形 前四个参数可缩写如padding格式
  4. polygon(x1 y1,x2 y2,x3 y3);多边形
  5. url();从图像中提取形状，图像限于透明图片
  • Html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

</head>

<style>

    .block{

        width: 300px;

        height: 50px;

        margin: 20px auto;

    }

    .img{

        width: 200px;

        height: 200px;

        float: left;

        shape-outside: circle();

        clip-path: circle();

        background-color: pink;

    }

</style>

<body>

<div class="block">

    <div class='img'>

    </div>

    <div class="font">加好久好久好久好久好久考核计划的回复我会和符号位胡吴海

        峰吴红红芜湖和黑偶然黑哦温和的齐全哦我和叫哦后和皇后和同和和和和阿斯蒂

        芬基本都是看不出窗口事件笔记本求</div>

</div>

</body>

</html>

注意：clip-path 属性可以将元素裁剪为基本形状或 SVG 源。

CSS色彩渐变

  • 介绍：conic-gradient() 函数，创建一个由渐变组成的图像。

    圆锥渐变是颜色过渡围绕中心点旋转，而不是从中心向外辐射。创建圆锥渐变至少需要设置两个色标。

彩虹圆盘

  • 实现效果：

  • Html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

    <style>

        .block{

            width:200px;

            height:200px;

            border-radius:100px;

            background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg);

        }

    </style>

</head>

<body>

<div class="block">

</div>

</body>

</html>

饼图

  • 实现效果：

  • html代码：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <link rel="stylesheet" href="circle.css">

    <style>

        .block{

            width:200px;

            height:200px;

            border-radius:100px;

            background:conic-gradient(red 0deg,red 30deg,orange 30deg,orange 180deg,yellow 180deg,yellow 360deg);

        }

    </style>

</head>

<body>

<div class="block">

</div>

</body>

</html>

注意：red 0deg,red 30deg指的是红色是从多少度到多少度。

指定背景如何附着在容器上

  • 介绍：使用background-attachment属性。
  • 属性值：
值 描述
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。
inherit 指定 background-attachment 的设置应该从父元素继承。

长度单位vh

  • 介绍：实现根据视口的高度，自适应某一部分的高度，表示相对视口高度。视口被均分为100单位的vh，即1vh = 1% * 视口高度。可以用来解决主体内容不足以撑起视口的剩余高度时，页面底部留白太多的问题。

　　如：width:10px，可改成width:10vh。

用shape-outside实现文字环绕、CSS圆锥色彩渐变、指定背景在容器上如何附着、长度单位vh的更多相关文章

  1. （转）css中通常会用到浮动与清除，也是一个必须掌握的知识点，概念性的东西不多说，下面举几个例子，来说明它的用法：1.文字环绕效果 2.多个div并排显示 3.清除浮动（默认显示）

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  2. 《css揭秘》下（伪元素，文字背景，垂直居中技巧，文字环绕）

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  3. css文字环绕图片--遇到的问题及解决方法

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  4. HTML/CSS实现文字环绕图片布局

    原文: https://blog.csdn.net/yiyelanxin/article/details/75006925 在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办 ...

  5. html小知识点汇总（浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class，针对特定的标签进行修改）

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  6. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...

  7. CoreText实现图文混排之文字环绕及点击算法

    系列文章: CoreText实现图文混排:http://www.jianshu.com/p/6db3289fb05d CoreText实现图文混排之点击事件:http://www.jianshu.co ...

  8. wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...

  9. WPF 在绘图控件(Shape)中添加文字 [2018.7.15]

    原文:WPF 在绘图控件(Shape)中添加文字 [2018.7.15] Q:使用Shape的子类Ellipse画一个圆,如何在圆中添加文字? A:Shape类中不包含Text属性.可使用Shape类 ...

  10. 文字环绕和两栏自适应以及区域滚动插件iscroll.js

    一.文字环绕效果:使用浮动 <div class="boxleft"></div> 我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字我是一段文字 ...

随机推荐

  1. 原生js创建节点，添加节点，删除节点

    1.操作 var tab=document.querySelector('#app .bpm-container'); var abcbox=document.querySelector('.abcb ...

  2. lua 文件读写处理（操作敏感词库）

    最近需要给游戏做一个敏感词新系统,我采用的方法是比较常用的DFA(确定有穷状态机)算 法,先不讲算法,而这种算法的实现需要一个相应的敏感词库. 我拿到了词库后发现词库中大概有8000+个词,其中包括很 ...

  3. python常用的六个字符串处理方法

    1.upper(将小写字母转换为大写) 语法: str.upper() 参数: NA 实例: a = 'abc' b = a.upper() print(b) 结果: ABC 2.lower(将小写字 ...

  4. [工作]IT连和IT恋产品已完成第一版，准备上线运营

    本文为原创文章,转载请注明出处!我的博客地址:http://www.cnblogs.com/txwd 嗯!又该写一下工作记录了,因为到目前为此,产品基本完成1.0版本了.安卓版的IT连和IT恋已经小更 ...

  5. home条 防止误碰

    某些界面需要隐藏home条,防止误触导致页面返回 - (UIRectEdge)preferredScreenEdgesDeferringSystemGestures { return UIRectEd ...

  6. 哲讯分享：sap软件多少钱一套

    SAP软件一般指SAP. SAP,为"System Applications and Products"的简称,是德国SAP公司的产品--企业管理解决方案的软件名称.至今世界500 ...

  7. return chain.filter(exchange); 这句啥意思

    答:继续往后执行过滤器,如果不调用这句代码,请求就不会发给控制器了,如果当前执行的过滤器后面还有过滤器,执行那个过滤器,如果没有,就执行控制器. 那我此时想一个请求取消token校验,得在这里加吗? ...

  8. springcloud(六) - 配置中心

    功能介绍 设置和业务代码获取配置 功能实现 <!-- 添加configjar --> <dependency> <groupId>org.springframewo ...

  9. pillow 创建图片并添加一些自定义信息

    from PIL import Image vm = Image.new('RGBA', (dshape[1], dshape[0])) vm = Image.fromarray(np.array(s ...

  10. inux配置PATH路径

    查看PATH:echo $PATH以添加python3为列 修改方法一:export PATH=P A T H : PATH:PATH:HOME/bin:export PATH=P A T H : P ...