用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. Metasploit渗透测试框架二

    Metasploit基本使用方法 Metasploit基本命令 Metasploit程序需要使用Postgresql数据库. Postgresql是一种特性齐全的自由软件的对象-关系型数据库管理系统( ...

  2. 2023最新版Selenium 4.6.0语法快速入门

    简介 Selenium是一款强而有力的前端应用测试工具,也非常适合搭配Python作为网络爬虫的工具:Selenium可以模拟使用者所有浏览器操作的动作,包括输入文本.点击按钮及拖拽进度条等.有鑑于新 ...

  3. MySQL下载，安装，配置环境变量【0基础小白用】

    一,下载 选择社区版的,下载地址:https://dev.mysql.com/downloads/installer/  ,选择离线安装包 二,安装 1,双击安装包文件,这里选择服务模式,会安装在默认 ...

  4. 求助：我需要用Python中parsel模块提取文章的文本内容，有什么办法

    求助: 像这样 我想提取小说文章内容 怎么提取 我要用的模块有parsel <!DOCTYPE html> <html lang="en"> <hea ...

  5. css 卡片hover效果

    .card { height: 430px; width: 100%; background:#ffffff; border:1px solid #eaeefb; border-radius:5px; ...

  6. [部署日记]GO在Visual Studio Code初次运行时提示go: go.mod file not found in current directory or any parent directory; see 'go help modules'

    我裂开,一波未平一波又起... 按照MS教程上填写 package main import "fmt" func main() { fmt.Println("Hello ...

  7. 自定义select组件

    (声明:当前记录篇参考于该人员 https://www.jb51.net/article/166679.htm ) 一.创建组件 1.新建文件夹:select 2.新建Component: selec ...

  8. webrtc 拥塞控制相关

    RFC8836 对实时交互式音视频应用的拥塞控制算法需求进行了较为全面的总结 延迟 拥塞控制算法应该尽可能降低延时,尤其是算法本身引入的延时.与此同时仍然需要提供可用的带宽水平. -吞吐率:在相应场景 ...

  9. Xmind 8 pro 破解版详细安装教程

    写在前面的废话: 本来网上就有很多破解版的Xmind,也有安装教程,为什么我还要多此一举做这个教程呢? 因为实际安装后,使用起来总会有各种小瑕疵,最烦人的问题就是,xmind文件和软件无法关联,双击x ...

  10. Andorid 悬浮窗的适配指北

    我们有时候需要显示一个悬浮窗,悬浮窗由服务开启,里面会有一些操作 但是我在开发时遇到高版本 Android12 和低版本4.4 ,显示不一样的地方 这边整理了下适配的方法方案 一:根据版本不一的时候, ...